Question

我对内联和块元素有疑问。将内联元素放在与块元素相同的级别上是否正确？还是应该包裹它们？

示例：

<div class="name">
     <span class="name__text">List name</span>
</div>
<div class="list>
    ...
</div>

或不包裹

<span class="name">List name</span>
<div class="list>
    ...
</div>

两个示例都很好。规范对此有何说明？

Answer 1

只要HTML仍然有效，就可以使用两种解决方案。但是，当您编写越来越多的代码时，其他包装可能会在以后有用。第一种结构使您可以创建一个简单的CSS网格，以帮助您保持代码清晰。

Answer 2

从技术上来说，两者都是正确的，并且将返回相同的结果，但最终归结为个人喜好以及您要从中获得的收益。仅供参考，您也可以更改内联行为以将其用作块元素：

.example {
  margin: 30px 0;
}

span {
  background: red;
  line-height: 30px;
}

.list {
  background: green;
  height: 30px;
}

.example.three span {
  display: block;
  width: 200px;
}

<div class="example one">
  <div class="name">
     <span class="name__text">List name</span>
  </div>
  <div class="list">
    ...
  </div>
</div>

<div class="example two">
  <span class="name__text">List name</span>
  <div class="list">
    ...
  </div>
</div>

<div class="example three">
  <span class="name__text">List name</span>
  <div class="list">
    ...
  </div>
</div>

块元素旁边的内联元素

2 个答案: