2

我有一个包含两个 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？

4

4 回答 4

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;
}

工作箱

于 2013-03-11T12:15:04.107 回答
0

This solution uses no absolute positioning. Tested on Win/Chrome.

Change the .center to

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

and add this rule

.center li {
    float: none;
}

jsfiddle

Update

If your content is not known, then you need JS (or jQuery) to set the offset relative position.

Initially I thought about using a different markup, but your restriction on absolute positioning pretty much kills this idea.

jsfiddle

It would be interesting to know why you cannot use absolute position. Maybe the root of your problem lies there.

于 2013-03-11T11:25:24.120 回答
0

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

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

于 2013-03-11T11:10:40.160 回答
0

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

于 2013-03-11T11:29:23.333 回答