Question

我遇到一个问题，浮动元素会干扰列表中某些项目的中心对齐。基本上我试图有一组水平居中的元素，然后另一个元素浮动到它们的右边。我可以做到这一切，但浮动元素以某种方式搞砸了数学。我试过HTML中十几种不同的元素放置无济于事。

HTML

<body>
    <div class="floaty">Some Contents!</div>
    <div class="listStuff">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</body>

CSS

.floaty {
    border:solid 1px green;
    float: right;
}
.listStuff ul {
    text-align:center;
    list-style-type:none;

    border: solid 1px blue;
    margin:0;
    padding:0;
}
.listStuff li {
    width:100px;
    height:100px;
display:inline-block;

    border: solid 1px red;
}

我对所有这些HTML / CSS业务都不熟悉，我开始认为我正在咆哮错误的树。可以这样做吗？

在这里小提琴： http://jsfiddle.net/YUn39/1/

Answer 1

使用this fiddle中的包装器：

<div class="wrapper">
    <div class="listStuff">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div class="floaty">Some Contents!</div>
</div>

.wrapper {
    position:relative;
    width:100%;
    height:auto;
}
.floaty {
    position:absolute;
    top: 0;
    right: 0;
    border:solid 1px green;
}
.listStuff ul {
    position:relative;
    text-align:center;
    list-style-type:none;
    border: solid 1px blue;
    margin:0;
    padding:0;
}
.listStuff li {
    width:100px;
    height:100px;
    display:inline-block;
    border: solid 1px red;
}

Answer 2

将你的.floaty类更改为绝对位置是一个问题还是你想要实现别的东西？

body {
    position: relative;
}
.floaty {
    border:solid 1px green;
    position: absolute;
    right: 0;
}

http://jsfiddle.net/YUn39/2/

css center使用float对齐项目

2 个答案: