Question

我试图在div中放置3个span元素。我有这段代码：

＆＃13;

div {
  background-color: yellow;
  width: 400px;
  height: 30px;
}
#one {
  position: relative;
  font-weight: bold;
  left: 5%;
}
#two {
  position: relative;
  font-weight: bold;
  left: 40%;
}
#three {
  position: relative;
  left: 70%;
  font-weight: bold;
}

＆＃13;

<div><span id="one">left</span><span id="two">middle</span><span id="three">right</span>
</div>

＆＃13;

问题是当你改变左，中，右两个词时，定位会发生变化，所以它们不再居中。无论文本内容如何，我如何将这些span元素居中？

Answer 1

＆＃13;

div {
  background-color: yellow;
  width: 400px;
  height: 30px;
}
.inner {
   width: 33%;
   float: left;
   text-align: center;
}

＆＃13;

<div><span id="one" class="inner">right</span><span id="two" class="inner">middle</span><span id="three" class="inner">left</span>
</div>

＆＃13;

如果你想覆盖宽度的1％（3 x 33％= 99％），你可以这样做：

.inner {
    float: left;
    text-align: center
}
.inner:not(:nth-of-type(2)) {
    width: 33%;
}
.inner:nth-of-type(2) {
    width: 34%;
}

Answer 2

我不确定我理解。告诉我这是否对你有帮助。

div {
  background-color: yellow;
  width: 400px;
  height: 30px;
}

div span {
    float: left;
    border: 1px solid black;
    width: 100px;
}

http://jsfiddle.net/hy2o7nh1/

您可以根据需要更改跨度宽度...或添加text-align:center; ...删除边框...等等'

位于div内的3个span元素

2 个答案: