html - 将 分成左右两组

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

截图:

即使边距设置为 66% 和 33%，这两个栏也不希望处于相同的“高度”。此外，text-align 不会使“edit”、“notes”、“logout”从右到左出现。

另外我想知道是否有可能将这些链接左右放置两个单独的链接？这样我就不用做两个了。

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 中使用> 类