0

いくつかのデザインに小さな問題があります。

私はこの非常に単純なhtmlを持っています:

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

これは、より大きなウィジェットのほんの一部です。このウィジェットを機能させるには、少なくとも次の css が必要です。

div {
    position: relative;
    width: 400px;
    height: 200px;
}

ul {
    z-index: 99;
}

li {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
}

ここで、リストを div の真ん中に置きたいと思います。下に置くのは問題ないのですが、真ん中に入れるのは私には無理です。リストには任意の数のアイテムを含めることができます。

JSfiddle: http://jsfiddle.net/MBxNU/1/

これまでのところ、たとえば次のように試しました。

ul {
    width: 100%;
    display: block;
    text-align: center;
}

しかし、それはうまくいきませんでした。その理由はわかりません。

助けていただければ幸いです。

4

2 に答える 2

1

ul 内に項目が浮かんでいるため、text-align: center を使用したコードは機能しません。float の代わりに display: inline-block を使用できます。

li {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: red;
    margin: 5px;
}

JSfiddle: http://jsfiddle.net/caprella/r2RjM/1/

于 2013-09-17T09:51:31.627 に答える