Html 对齐div标记中的文本

我在下面的html中找到了这个

str+="<div class='label' date1='"+a+"' date2='"+a1+"' id='mydiv'> Start Date "+a;
str+="End Date "+a1;

str+=“开始日期”+a；
str+=“结束日期”+a1；

现在我想date1应该与页面左对齐，date2应该与页面右对齐

如何做到这一点

---

这会节省你的时间

///HTML

<div class="label" date1="10/5/2016" date2="10/20/2016" id="mydiv"><div style = 'float:right'>End Date 10/20/2016
</div>
</div>Start Date 10/5/2016></div>

截止日期2016年10月20日
开始日期2016年5月10日>

---

现场演示：

将日期包装在

span

中，并添加css，如下所示

<div class="label" date1="10/5/2016" date2="10/20/2016" id="mydiv">
    <span class="float-left">Start Date 10/5/2016</span>
    <span class="float-right">End Date 10/20/2016</span>
</div>

试着这样做：

CSS:

HTML:

开始日期2016年5月10日
截止日期2016年10月20日

试试这个代码笔

我将两个日期包装在两个跨度中，并使用

display:inline块

到span元素以与宽度对齐，对于我使用的第一个元素

text align:left

从左开始，对于使用的第二个元素

文本对齐：右从右侧开始

注：我给出的
最大宽度：800px到父元素，但您可以指定宽度，也可以删除。
您可以将两个日期都放在span或p标记中，并使一个元素向左浮动，另一个元素向右浮动

根据您的代码更新

 $str .="<div class='label' date1='".a."' date2='".a1."' id='mydiv'><span style='float:left'> Start Date ". a.'</span>';
$str.="<span style='float:right'>End Date ".a1.'</span>';

$str.=“开始日期”。a、 ''；
$str.=“结束日期”.a1.'；
使用float:left和float:right表示日期


.label{
宽度：100%；
高度：自动；
最大宽度：800px；
}
.日期-1{
宽度：50%；
文本对齐：左对齐；
浮动：左
}
.日期-2{
宽度：50%；
文本对齐：右对齐；
浮动：对；
}
开始日期2016年5月10日结束日期2016年10月20日
使用
flexbox
和
伪元素
简化操作


#mydiv{
显示器：flex；
证明内容：之间的空间；
}
#mydiv：：之前{
内容：“开始日期：”属性（日期1）；
}
#mydiv：：之后{
内容：“结束日期：”属性（日期2）；
}
用
span
标签包装结束日期，并使其
float:right
。将您的
div
宽度设置为100%。谢谢。。实际上，我是在单击时创建一个动态标签。那么，你能告诉我如何对齐这些标记吗..我已经更新了我的代码..在创建标签的同时动态创建span元素作为子元素。根据更新后的代码，如何将span标记与str+…@learningmode连接起来请参见。我只是用了你的方式，就像你用了+一样，所以只是用了这个流程，忘记了它，它是错误的方式，我得到了错误----未捕获的语法错误：意外标记=@learningmode你提供的代码是不正确的str需要有$符号，因为它们是可变的。
.fl{ float:left; }
.fr{ float:right; }
.label{ clear:both; }

<div class="label" date1="10/5/2016" date2="10/20/2016" id="mydiv">
    <span class="fl">Start Date 10/5/2016</span> 
    <span class="fr">End Date 10/20/2016</span>
</div>

 $str .="<div class='label' date1='".a."' date2='".a1."' id='mydiv'><span style='float:left'> Start Date ". a.'</span>';
$str.="<span style='float:right'>End Date ".a1.'</span>';