将 与 display: inline-block 一起使用。不好的做法？答案

【问题标题】：Using together with display: inline-block. Bad practice?将 与 display: inline-block 一起使用。不好的做法？
【发布时间】：2014-02-27 01:09:31
【问题描述】：

我正在使用如下表格：

<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。

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

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

【问题讨论】：

嗨@peter。我个人认为你在这里使用  很好。但我看到了反对的论点（但那些反对你在这里使用它的人，一定真的是挑剔）-fwiw-通过设置添加 css 以导致“中断”{ margin-bottom:0.5em; }/ 或类似内容，可以实现相同的目的。这就是 inline-block 元素的好处嘿，它的行为类似于 inline 元素，但需要边距和填充。

标签： html css

【解决方案1】：

我相信答案是是的。   用于文本中的换行符，而不是用于定位，但我会给你一个从长远来看会伤害你的情况。假设您的字段有一个移动布局，并且您希望它们在小屏幕上为 100% 宽度 - 上面有标签......然后在另一种情况下，您希望它们与另一个垂直对齐......然后在另一个情况降落在像设置的网格中。这些换行符会变得很麻烦。

这是一个jsFiddle。

我确实看到有人以一种巧妙的方式使用它们，他们在某些断点处对它们使用 display: none;，使它们处于非活动状态。我没想到会奏效。我只能想象将它们用于：

Cosmo 杂志
风格 - 巨大
文本布局

即使这样我也会使用 lettering.js 来插入跨度。但是，嘿 --- 并不是人们会说你错了......这是最适合工作的。而且我不认为  真的适合定位。

使用 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 */

【讨论】：

现在这些都是 flexbox 或 grid ^

【解决方案2】：

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

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

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

http://jsfiddle.net/pwtA4/

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

【讨论】：