javascript - 如何将两个 float 的 HTML 标签与自动换行对齐？

Question

我正在尝试对齐两个 float 的 HTML 元素，使其在另一侧面向正确的元素。 下面的 HTML 更清晰。

label{
  float:left;
  width:20%;
  padding-right:2.5%;
  word-wrap:break-word;
  background:red;
}
span{
  float:right;
  width:75%;
  padding-left:2.5%;
  word-wrap:break-word;
  background:green;
}

<div>
  <p>
    <label>OrderId:</label>
    <span>4857924875928475924</span>
  </p>
  <p>
    <label>Comment:</label>
 <span>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</span>
  </p>
  <p>
    <label>User:</label>
    <span>User_Name</span>
  </p>
</div>

当评论足够长时，上面的脚本会错位用户:User_Name。

我在这里遗漏了什么吗？

谢谢

Answer 1

定义你的p 标签 p{overflow:hidden;}

因为你使用了floating element 只需清除你的p tag

label{
  float:left;
  width:20%;
  padding-right:2.5%;
  word-wrap:break-word;
  background:red;
}
p{overflow:hidden;}
span{
  float:right;
  width:75%;
  padding-left:2.5%;
  word-wrap:break-word;
  background:green;
}

<div>
  <p>
    <label>OrderId:</label>
    <span>4857924875928475924</span>
  </p>
  <p>
    <label>Comment:</label>
 <span>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</span>
  </p>
  <p>
    <label>User:</label>
    <span>User_Name</span>
  </p>
</div>

more about this