Question

我是编写symantic html代码的新手。我正在使用bootstrap。我想尽可能在语法上编写我的html。但是为我的h2标签添加背景色会使其与页面中其他元素的对齐失真。

这是我的HTML

<div class="wrapper">
    <div class="slider-wrapper">
        <img src="images/slider/img1.jpg" alt="slider image" />
    </div>
    <div class="product-wrapper">
        <h2>Product One</h2>
        <div class="prod-slider">
        </div>
    </div>
    <div class="product-wrapper">
        <h2>Product Two</h2>
        <div class="prod-slider">
        </div>
    </div>
</div>

我的不足

.wrapper{
  .container;  //creates a bootstrap container
  .clearfix();
}
.slider-wrapper{
  .make-row();   //creates a bootstrap row
}
.slider-wrapper img{
  .MakeColumn(12, 12, 12, 12);//creates a 12 column width column.Its similar to adding .col-xs-12
  max-width: 100%;
}

.product-wrapper{
  .make-row(); //creates a row
}

.product-wrapper h2{
  .MakeColumn(12, 12, 12, 12);//creates a 12 column width column.Its similar to adding .col-xs-12
  background-color:#cccfff;//any color code
}

如果我使用像.container，.row，.col-XX-12这样的bootstrap css类，那么一切正常。但是，将背景颜色添加到h2标签时，会将其与上方的图像对齐。我知道我可以通过添加一个空div标签作为h2标签的父级来解决它，但我不想这样做以保持我的html代码尽可能的语义。

是否有更好的方法将背景应用于h2标记，使其与其他元素保持对齐（如上图所示）。

只是想补充说我尝试使用：before伪元素修复它但失败了。

Answer 1

使用<div>将其全部包装在语义上是正确的：div和h2都是块元素，因此您可以执行<div><h2>Your text</h2></div>。

Bootstrap正在将自定义规则应用于标题，padding就是其中之一。当你有填充并为元素添加背景时，它也会显示在填充区域上（与你使用margin时的情况相反）。如果你想要avioid它你需要覆盖Bootstraps h2 padding：

.product-wrapper h2{
  .MakeColumn(12, 12, 12, 12);//creates a 12 column width column.Its similar to adding .col-xs-12
  background-color:#cccfff;//any color code
  padding: 0; // This should do the trick for you
}

将背景添加到语义html元素会扭曲其与其他元素的对齐

1 个答案: