Question

我试图将li分成左右两组，并且文本左右对齐。

html文件：

    <div class="lavalamp_left dark">
        <ul>
            <li class="logo" >HP WebStats</li>
            <li class="active"><a href="">Views</a></li>
            <li><a href="">Help</a></li>
            <li><a href="">About</a></li>
        </ul>
        <div class="floatr"></div>
    </div>

    <div class="lavalamp_right dark">
        <ul>
            <li><a href="">Edit</a></li>
            <li><a href="">Notes</a></li>
            <li><a href="">Logout</a></li>
        </ul>
        <div class="floatr"></div>
    </div>

这是css文件：

.lavalamp_left
{
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
    height: 18px;
    width: 63%;
    text-alight: left;
}

.lavalamp_right
{
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
    height: 18px;
    width: 33%;
    float: right;
    text-align: right;
}

截图：

enter image description here

即使边距设置为66％和33％，两个柱也不希望处于相同的高度＆＃34;。此外，text-align不会使＆＃34;编辑＆＃34;，＆＃34;注释＆＃34;，＆＃34;注销＆＃34;从右到左显示。

此外，我想知道一个人是否有可能将这些链接左右两个单独的链接放置？那我就不用两个了。

Answer 1

将float:left添加到.lavalamp_left类

.lavalamp_left
{
    position: relative;
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background: #fff;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
    height: 18px;
    width: 70%;
    text-align: left;
    float:left;
}

.lavalamp_right
{
    position: relative;
    background: #fff;
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));
    height: 18px;
    width: 30%;
    float: right;
    text-align: right;
}

你已经为你的左右div设置了边框和填充。您必须在页面的最终宽度中考虑这些属性值。

我认为最好直接使用ul或li类填充，不要在lavalamp_left或lavalamp_right类中使用

Answer 2

根据定义，a div (division)元素是块行（它基本上等同于在它之前和之后有一个换行符）并用于对更大的代码块进行分组。这就是导致标题位于两个不同行的原因。

您可以使用表而不是div，如下所示：

<table>
    <tr>
        <td class="lavalamp_left dark">
                <ul>
                    <li class="logo">HP WebStats</li>
                    <li class="active"><a href="">Views</a>
                    </li>
                    <li><a href="">Help</a>
                    </li>
                    <li><a href="">About</a>
                    </li>
                </ul>
                <div class="floatr"></div>
        </td>
        <td class="lavalamp_right dark">
                <ul>
                    <li><a href="">Edit</a>
                    </li>
                    <li><a href="">Notes</a>
                    </li>
                    <li><a href="">Logout</a>
                    </li>
                </ul>
                <div class="floatr"></div>
        </td>
    </tr>
</table>

但是，如果你这样做，CSS需要更多的清理才能获得你想要的效果。

Answer 3

有很多方法可以做到这一点。不确定你想要什么，但这是最简单的：

http://codepen.io/rema/pen/iozbK

简单地将float: left添加到.lavalamp_left

这是另一个简单的例子：

http://codepen.io/rema/pen/Coevz

Answer 4

尝试将这两个元素放在另一个容器中，然后对齐应该有效。

将<li>拆分为左右两组</li>

4 个答案: