Question

我有3个元素，我想水平对齐，中间没有间隙，居中。我已经完成了水平和相等间隔的衬里，但是想要触摸，即它们之间没有白色空间，但也占据了100％的页面宽度。这是通用的html，但适用于我在实际页面上所做的事情：

CSS：

.content{
    width: 100%;
    height: 400px;
    background-color:white;
    text-align: justify;


}
.content .featureitem{

   height: 100%;
    width: 33%;
    display: inline-block;
    background-color:bisque;
    margin: 0;


}

.content:after{
    content: "";
    width: 100%;
    display: inline-block;
}

HTML：

<div class="content">
    <div class="featureitem"></div>
    <div class="featureitem"></div> 
    <div class="featureitem"></div> 
</div>

我尝试过使用display：flex，但是在右侧留下了空隙。我希望获得一行3个div，它们跨越100％的宽度，两者之间没有间隙。

Answer 1

您可以删除display: inline-block并添加float: left来实现此目的。另外，您应该考虑计算宽度，因为3*33% != 100%：

.content .featureitem{ 
    height: 100%;
    width: calc(100%/3);
    //display: inline-block;
    float: left;
    background-color:bisque;
    margin: 0;
}

Fiddle

Answer 2

如果您希望坚持使用display: inline-block;进行布局，可以通过多种方式对抗space between inline block elements。 CSS Tricks文章中有许多好的解决方案。我通常使用负边距选项（它还没有回来以主要方式咬我）：

nav a {
  display: inline-block;
  margin-right: -4px;
}

或

nav a {
  display: inline-block;
  margin-right: -2px;
  margin-left: -2px;
}

如果您对另一个布局开放，您可以使用flexbox，或者甚至将父级<div>的基于浮动的布局居中，如果这有意义的话。

Answer 3

如果您使用inline-block元素并在HTML代码中包含缩进，则每个元素之间会有一个空格。（就像您在单词之间留下的那个）

您可以避免使用html中的任何空白或使用display : flex或表格布局。

您可以使用HTML评论来消除差距

.content{
    width: 100%;
    height: 400px;
    background-color:white;
    text-align: justify;


}
.content .featureitem{

   height: 100%;
    width: 33.33%;
    display: inline-block;
    background-color:bisque;
    margin: 0;


}

.content:after{
    content: "";
    width: 100%;
    display: inline-block;
}

<div class="content">
    <div class="featureitem"></div><!--
    --><div class="featureitem"></div><!--
    --><div class="featureitem"></div> 
</div>

或表/表格单元格显示

.content {
  width: 100%;
  height: 400px;
  background-color: white;
  text-align: justify;
  display: table;
}
.content .featureitem {
  height: 100%;
  width: 33.33%;
  display: table-cell;
  background-color: bisque;
  margin: 0;
}

<div class="content">
  <div class="featureitem"></div>
  <div class="featureitem"></div>
  <div class="featureitem"></div>
</div>

或显示：flex和flex：1

.content {
  width: 100%;
  height: 400px;
  background-color: white;
  text-align: justify;
  display: flex;
}
.content .featureitem {
  height: 100%;
  flex: 1;
  background-color: bisque;
}
.content:after {
  content: "";
  width: 100%;
  display: inline-block;
}

<div class="content">
  <div class="featureitem"></div>
  <div class="featureitem"></div>
  <div class="featureitem"></div>
</div>

如何在容器div

3 个答案: