html - 如何正确对齐标签和跨度

Question

我把这个放在一起 fiddle

我有 2 个 div，然后其中一个还有 2 个 div。我正在尝试在第二个 div 中正确定位标签和跨度

  <div id="someotherdiv">

  </div>
  <div class="reportuserinfo">
        <div class="leftdivinfo">
             <label>Teacher:</label><span>Teacher Name</span><br/>
            <label>District:</label><span>District Name</span><br/>
            <label>School:</label><span>School Name</span>
        </div>
        <div class="rightdivinfo">
            <label>Class:</label><span>Class Name</span><br/>
            <label>Content:</label><span id="currcontent">Content</span><br/>
            <label>Unit:</label><span id="currunit"></span>
        </div>
    </div>

如果您现在查看 fiddle ，标签向右浮动，跨度也是如此，但它们看起来很奇怪，我想要完成的是在第二个 div 的两侧都是这样的:

 Teacher:   Teacher Name
District:   District Name
  School:   School Name

他们现在的样子是

Teacher:     Teacher Name
District:   District Name
School:    School Name

感谢您的帮助。

Answer 1

我刚刚添加了 width:30%;在您的 css 类“.reportuserinfo 标签”中，它解决了问题 (fiddle)。您需要定义宽度以解决文本对齐问题。您可以根据需要调整空间边距。

现在我觉得你的代码是这样的:-

.reportuserinfo label {
    float: left;;
  margin-right: 30px;
  font-weight: bold;
  text-align: right;
  width:30%;
}