logo标签列表

在使用display: inline-block时同时使用<br>标签，这是不好的习惯吗？

htmlcss
3

我正在使用以下类似的表单：

<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>而不是margin和padding当然是不好的做法。这就是它变得如此不受欢迎的原因。
据我所知，在内联元素中使用单个<br>标签没有什么不好的理由，因为它旨在作为文本中的换行符，而不会创建新的文本部分。通过display: inline-block，您可以将内联行为模拟到块元素中。元素之间的空格显示为内联元素中的空格。 在我的情况下，<br>代替了两个包装器<div>。我喜欢我的HTML代码整洁，所以我犹豫是否使用太多的包装器<div>。在这种情况下使用<br>是否是不好的做法？如果您只读取HTML文件，我认为这非常清楚。您对此有何看法（没有关于<br>的任何偏见）？
1
嗨@peter。就我个人而言，我认为你在这里使用<br>是可以的。但我也看到了反对的观点（但那些反对你在这里使用它的人，可能真的很挑剔）- fwiw - 可以通过添加CSS来实现相同的效果，例如设置 { margin-bottom:0.5em; } / 或类似的样式。这就是inline-block元素的好处，它们像inline元素一样运作，但可以有边距和填充。 - Rob Sedgwick
4个回答
2
我认为答案是“是”。<br />用于文本中的换行，而不是定位。但我会给你一个情况，在长期运行中它可能会对你产生影响。假设您拥有字段的移动布局，并且您希望它们在小屏幕上为100％宽度 - 带有标签在上方...然后在另一种情况下，您希望它们垂直对齐到另一个位置...然后在另一种情况下，它们像网格一样排列。这些换行符将变得麻烦。
这里是jsFiddle。
我确实看到有人以巧妙的方式使用它们，他们在某些断点上对它们使用了display: none;，使它们无效。我没想到那会起作用。我只能想象将它们用于：
Cosmo杂志 样式-巨大的 文本布局
即使如此，我也会使用lettering.js来插入spans。但是--重要的是它是否能胜任工作，而不是人们是否说您错了。我认为<br />从来都不适合定位。
在HTML5中，似乎现在每个元素都有一个元素，因此div用于定位。这对我来说似乎非常语义化。
<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。 - sheriffderek
0

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

在这种情况下，这是可能的：演示

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;
}
0

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

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

http://jsfiddle.net/pwtA4/

如果您想要适配小屏幕，可能需要添加一些媒体查询。

0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接