3

<span>横に並べて配置したい要素が3つあります。また、中央の要素をページの中央（水平方向）に配置する必要がありますが、。margin:auto; width: 100pxであるため機能していません<span>。作ると<div>改行があります。

この問題を解決するにはどうすればよいですか？

4

3 に答える 3

7

span幅 100px の3 つの同一の要素を使用し、中心に設定してdisplay: inline-blockネストしたものを使用します: http://jsfiddle.net/e9sru/divtext-align

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

1 つの div を作成し、その幅を 100% に設定するとします。このダイブ内に、さらに 3 つの div を作成します。要素ごとに 1 つ。各要素の幅を 33.3% に設定すると、それに応じて中央の要素と他の要素が中央に配置されます。同様に、マージンを追加して 33.3% を減らすことができます。たとえば、中央の div に margin: 0 3% 0 3% を指定すると、左右に 3% のマージンが得られます。常に合計 100% になる必要があるため、div 幅のサイズからマイナス 6%

于 2013-03-10T16:30:46.917 に答える
0

spandivはインライン要素であるため、ブロック要素である のようには動作しません。

フロートを組み合わせて中央に揃えることをお勧めします。

例：

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 に答える