Question

我正在使用如下表单：

<form action="#" method="post">

  <div class="row">
    <label for="email">E-Mail</label>
    <input type="text" name="email" id="email">
  </div>

  <div class="row">
    <label for="password">Password</label>
    <input type="password" name="password" id="password">
    <br>
    <label for="passwordRepeat">Repeat Password</label>
    <input type="password" name="passwordRepeat" id="passwordRepeat">
  </div>

  <div class="row">
    <label for="phonenumber">Phone Number</label>
    <input type="text" name="phonenumber" id="phonenumber">
  </div>

</form>

具有以下样式：

.row {
  background-color: #eee;
  margin-bottom: 10px;
  padding: 5px;
}
.row > * {
  display: inline-block;
  vertical-align: middle;
}
.row > label {
    width: 200px;
}

查看JSFiddle。

我正在使用<br>标记来破坏属性display: inline-block的一堆元素之间的界限。我知道使用<br>代替边距和填充当然是不好的做法。这就是它变得如此不受欢迎的原因。

据我所知，没有充分的理由不在内联元素中使用单个<br>标记，因为它的目的是：作为文本中的换行而不创建新的文本部分。使用display: inline-block，可以模拟块元素的内联行为。元素之间的空间与内联元素中的空格一样。就我而言，使用<br>而不是两个包装<div>。我确实喜欢我的HTML代码，所以我在使用许多包装器<div>时犹豫不决。在这种情况下使用<br>是不好的做法吗？如果您只是阅读HTML文件，我认为这里发生的事情非常清楚。您如何看待这一点（一般不对<br>做任何预先判断）？

Answer 1

我相信答案是是。 <br />用于文本中的换行符，而不是用于定位，但是我会给你一个从长远来看会伤害你的情况。假设您的字段具有移动布局，并且您希望它们在小屏幕上具有100％宽度 - 标签高于...然后在另一种情况下您希望它们垂直对齐在另一个...然后在另一个情况如网格设置。这些阵容将变得繁琐。

以下是jsFiddle。

我确实看到某人以聪明的方式使用它们，他们在某些断点上使用display: none;使它们处于非活动状态。我没想到会工作。我真的可以想象使用它们：

Cosmo杂志
风格 - 巨大的文字布局

即便如此我也会使用lettering.js来插入跨度。但是嘿---并不是说人们会说你错了......这就是最好的工作。我并不认为<br />真的适合定位。

使用HTML5，现在似乎所有东西都有一个元素，因此div用于定位。这对我来说似乎很有语义。

HTML

<div class="input-wrapper"> <label data-required="required">E-Mail</label> <input type="email" name="email" /> </div>

CSS

.your-form .input-wrapper { width: 100%; float: left; margin-bottom: 2em; } .your-form label { display: block; width: 100%; float: left; } [data-required="required"]:after{ content: "*"; color: red; font-size: .8em; vertical-align: top; padding: .2em; } .your-form input{ display: block; width: 100%; float: left; } @media screen and (min-width: 28em) { .your-form label { width: auto; float: none; display: inline-block; vertical-align: middle; min-width: 10em; } .your-form input{ width: auto; /* overide previous rule */ float: none; /* overide previous rule */ display: inline-block; /* center vertically */ vertical-align: middle; /* center vertically */ /* min-width: 20em; */ font-size: 1.4em; /* just to show vertical align */ } } /* end break point */

Answer 2

是的，因为您使用内容元素进行样式设置。它可能更短，但这并不意味着它更清洁。

Answer 3

如果可能，应该避免添加仅用于样式目的的元素。

在这种情况下，有可能：Demo

HTML：

<form action="#" method="post">
    <div class="row">
        <label>E-Mail <input type="text" name="email" /></label>
    </div>
    <div class="row">
        <label>Password <input type="password" name="password" /></label>
        <label>Repeat Password <input type="password" name="passwordRepeat" /></label>
    </div>
    <div class="row">
        <label>Phone Number <input type="text" name="phonenumber" /></label>
    </div>
</form>

CSS：

.row {
    background-color: #eee;
    margin-bottom: 10px;
    padding: 5px;
}
.row > label {
    display: block;
    overflow: hidden;
    width: 350px;
}
.row > label > input {
    float: right;
}

Answer 4

我会尽可能地避免它。您可以通过向input元素添加边距来实现您想要的内容，而不是使用浮点数，如：

.row > input
{
    margin-right:50%;
}

http://jsfiddle.net/pwtA4/

如果您想要更小的视图端口，可能需要添加一些media queries

使用<br/>与display一起使用：inline-block。不好的做法？

4 个答案:

HTML

CSS