Question

我有一个包含两个ul的div。我想把第一个ul放在右边，第二个ul放在中间位置我不能使用绝对定位，因为它使我在嵌套元素和移动视图中出现其他问题。

这就是我所做的：

<div class="w">
    <ul class="right"><li>a very very very long text</li></ul>
    <ul class="center"><li>center</li></ul>
</div>

.w {
    text-align: center;
    display: inline-block;
    width: 100%;
}

ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
}

li {
    float: left;
}

.right {
    float: right;
}

.center {
    display: inline-block;
}

你可以在这里看到jsfiddle：http://jsfiddle.net/mF7XR/

问题在于，居中的ul与左边和右边ul的开头之间的中间对齐（参见示例）。因此它没有正确居中。我如何集中纠正第二个ul？

Answer 1

我不确定你是否善于使用javascript。无论如何，我做了一些工作。请看一看。

<强>的javascript

//Added Id to ul.center as "center"
function resize(){
  var width = document.body.offsetWidth;
  var center = document.getElementById('center');
  center.style.marginLeft = (width/2) - (center.offsetWidth/2);
}
//Call the above function on "resize" and "load" events.

<强> CSS

.center {
   display: inline-block;
   float:left;
}

<强> Working Bin

Answer 2

position:relative怎么样？然后，您可以将其放置在任何位置，而不会导致嵌套元素和移动视图出现问题。

http://jsfiddle.net/mF7XR/4/

Answer 3

此解决方案不使用绝对定位。在Win / Chrome上测试。

将.center更改为

.center {
    display: inline-block;
    position: relative;
    width: 100%;
    top: -20px; /* move up */
}

并添加此规则

.center li {
    float: none;
}

<强> jsfiddle

<强>更新

如果您的内容未知，则需要JS（或jQuery）来设置偏移相对位置。

最初我考虑过使用不同的标记，但是你对绝对定位的限制几乎会破坏这个想法。

<强> jsfiddle

知道为什么你不能使用绝对位置会很有趣。也许问题的根源在那里。

Answer 4

定义居中元素的宽度，然后只有你可以得到你想要的。您还可以按如下方式定义保证金...... margin：0 {数字大于右浮动元素} px 0 {数字大于左浮动元素这里你只有两个元素所以放在这里0} px;

将div放在div中以及其他浮动ul

4 个答案: