Question

有时候我会被简单的东西绊倒，我似乎无法让它发挥作用。我希望这两个跨度对我来说，在div中居中的自动边距...

<div class='foo'>
<span class='bar'>one</span>
<span class='bar'>two</span>
</div>

.foo{
  width:50%;
  margin:auto;
  background-color:blue;
}
.bar{
  width:30%;
  margin:auto;
  background-color:red;

Answer 1

<div class='foo'>
<span class='bar'>one</span>
<span class='bar'>two</span>
</div>

.foo{
  width:50%;
  margin:auto;
  background-color:blue;
  text-align:center;
}
.bar{
  width:30%;
  margin:auto;
  background-color:red;
}

请参阅此fiddle

Answer 2

使用flex

＆＃13;

.foo{
  display:flex;
  flex-direction:row;
  width:50%;
  margin:auto;
  background-color:blue;
}
#main{
  margin:auto;
 
}
.bar{
  border:solid yellow;
   background-color:red;

}

＆＃13;

<div class='foo'>
<div id='main'>
<span class='bar'>one</span>
<span class='bar'>two</span>
</div>
</div>

＆＃13;

或只使用text-align

＆＃13;

.foo{
  width:50%;
  margin:auto;
  background-color:blue;
}
.bar{
  width:30%;
  margin:auto;
  background-color:red;
  display: inline-block;
}
#main {
  text-align:center;
}

＆＃13;

<div class='foo'>
<div id='main'>
<span class='bar'>one</span>
<span class='bar'>two</span>
</div>
</div>

＆＃13;

或者我不知道你是否在寻找这样的东西

＆＃13;

.foo{
  display:flex;
  width:50%;
  margin:auto;
  background-color:blue;
  flex-drection:row;
}
.bar{
  width:30%;
  margin:auto;
  background-color:red;
  display: inline-block;
}

＆＃13;

<div class='foo'>
<span class='bar'>one</span>
<span class='bar'>two</span>
</div>

＆＃13;

Answer 3

我的猜测是，您希望剩余的空白区域（父级宽度的40％）均匀分布在两个span之间以及父级左边缘与第一个子级{{}之间的间距1}}，以及父级右边缘和第二个span右边缘之间的间距。

这样做的一种方法是将第一个span的左右边距指定为13.3333％（40％/ 3）。如果你浮动span，那么考虑边距宽度，元素将彼此相邻。

第二个元素不需要任何边距值，因为它将位于第一个元素右侧的正确位置。

在父项上添加span以包含浮动元素。

overflow: auto

.foo{
  width:50%;
  margin:auto;
  background-color:blue;
  overflow: auto;
}
.bar{
  width:30%;
  background-color:red;
  float: left;
  text-align: center; /* optional... */
}
.bar:first-child {
  margin-left: 13.3333%;
  margin-right: 13.3333%;
}

边缘自动两个跨越div

3 个答案: