3

我有三个<span>元素要一个接一个地水平放置。我还需要中间元素位于页面的中心（水平方向），但margin:auto; width: 100px由于它是<span>. 如果我成功了<div>，就会有换行符。

我该如何解决这个问题？

4

3 回答 3

7

我会使用三个相同span的 100px 宽度的元素，display: inline-block嵌套在一个div设置text-align为中心的元素中：http: //jsfiddle.net/e9sru/

HTML：

<div id="container">
    <span class="inner">
        <div class="overflow">Lorem ipsum dolor est mori. I am overflowing but still to the left of number two</div>
    </span>
    <span class="inner">Two</span>
    <span class="inner">Three</span>
</div>

CSS：

#container {
    text-align: center;
}

.inner {
    display: inline-block;
    position: relative;
}

.overflow {
    float: right;
}
于 2013-03-10T16:32:58.123 回答
1

如果您创建一个 div 并将其设置为 100% 的宽度。在这个潜水中，您创建了另外 3 个 div；每个元素一个。如果您将每个元素的宽度设置为 33.3%，那么它将相应地居中中间的一个和另一个 2。同样，您可以添加边距以减少 33.3%。例如，margin: 0 3% 0 3% on center div 会给它左右 3% 的边距。从 div 宽度的大小减去 6%，因为它的总和必须始终为 100%

于 2013-03-10T16:30:46.917 回答
0

span是一个内联元素，所以它的行为不像div是一个块元素。

我建议混合使用浮动和对齐中心。

例子：

HTML

<span class="block element3">ELEMENT3</span>
<span class="block element1">ELEMENT1</span>
<span class="block element2">ELEMENT2</span>

CSS

.block {
    display: block;
    width: 100px;
}
.element3 {
    float: right;
    background-color: red;
}
.element2 {
    float: left;
    background-color: green;
}
.element1 {
    text-align: center;
    background-color: blue;
    width: auto;
}

更新：

http://jsfiddle.net/YUCv2/1/

于 2013-03-10T16:33:09.030 回答