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>

如果你现在看小提琴，那么标签是向右浮动的，因此它们看起来很奇怪，我试图在第二个div的两边做到这样的事情：

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

他们现在的样子是

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

感谢您的帮助。

Answer 1

除了宽度之外，您应该在css中定义最小宽度样式：40％以确保在浏览器宽度减小时您尝试写入的文本不会滚动

.leftdivinfo {
    float:left;
    min-width: 200px;
    width:40%;
    background: yellow;
    padding-left: 30px;
    padding-right: 30px;
}

Answer 2

你尝试过使用过桌子吗？您可以将此信息包含在表格中，然后右对齐左栏中的文本：

table {
  border: none;
}

td:first-child {
  text-align: right;
}

td {
  padding: 5px;
}

<table>
  <tr>
    <td>Class Teacher:</td>
    <td>John Smith</td>
  </tr>
  <tr>
    <td>District:</td>
    <td>Smithsville</td>
  </tr>
  <tr>
    <td>School:</td>
    <td>Smith's High School</td>
  </tr>
</table>

Answer 3

尝试将width设置为auto并添加display:inline-block。

.leftdivinfo {
  float:left;
  width: auto;
  background: yellow;
  padding-left: 10px;
  padding-right: 10px;
  display:inline-block
}

表格可能是更好的方法。

修改我看到你希望冒号对齐，将min-width:70px;添加到标签类。

Answer 4

我刚加了宽度：30％;在你的css类“.reportuserinfo label”中它修复了问题（fiddle）。您需要定义宽度以修复文本对齐问题。您可以根据自己的要求调整空间边距。

以下是您的代码现在的样子： -

# prevent httpd from serving dotfiles (.htaccess, .svn, .git, etc.) 
# - except let's encrypt challenge
RedirectMatch 403 ^/?\.(?!/well-known/acme-challenge/[\w-]{43}$)

RewriteCond %{REQUEST_URI}::$1 ^(/.+)/(.*)::\2$
RewriteRule ^(.*) - [E=BASE:%1]

如何正确对齐标签和跨度

4 个答案: