Html 拆分<；李>；分成左右两组_Html_Css

Html 拆分<；李>；分成左右两组

html css

Html 拆分<；李>；分成左右两组,html,css,Html,Css,我正试图将li分为两组，左组和右组，它们的文本对齐方式也是左组和右组 html文件： <div class="lavalamp_left dark"> <ul> <li class="logo" >HP WebStats</li> <li class="active"><a href="">Views</a></li>

我正试图将

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>

截图：

即使边距设置为66%和33%，这两条线也不希望处于相同的“高度”。此外，文本对齐不会使“编辑”、“注释”、“注销”从右向左显示

另外，我想知道是否有可能为一个单一的地方，这些链接两个独立的链接左右？然后我就不必再做两个了。

试着把这两个元素放在另一个容器中，对齐就可以了。

将

float: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\u left
或lavalamp\u right
类中使用
.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\u left
或lavalamp\u right
类中使用。不确定您想要什么，但这是最简单的：

只需将float:left
添加到.lavalamp\u left

下面是另一个简单的例子：
有很多方法可以做到这一点。不确定您想要什么，但这是最简单的：

只需将float:left
添加到.lavalamp\u left

下面是另一个简单的例子：
根据定义，元素是块行（基本上相当于前后有一个换行符），用于对较大的代码块进行分组。这就是导致标题位于两个不同行上的原因
您可以使用表而不是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>



HP网站状态
















然而，如果您这样做，CSS将需要更多的清理来获得您想要的效果。
根据定义，元素是块行（基本上相当于前后有一个换行符），用于对较大的代码块进行分组。这就是导致标题位于两个不同行上的原因
您可以使用表而不是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>



HP网站状态
















但是，如果您这样做，CSS将需要更多的清理以获得您想要的效果。
谢谢您的帮助！即使宽度设置为“共享”到之间的空间。如果你把屏幕缩小，一个会叠在另一个上面。为什么会出现这种情况？您已经为左、右div设置了边框和填充。你也必须考虑这些属性。这是完全响应无边框和填充感谢帮助！即使宽度设置为“共享”到之间的空间。如果你把屏幕缩小，一个会叠在另一个上面。为什么会出现这种情况？您已经为左、右div设置了边框和填充。你也必须考虑这些属性。这是完全响应无边框和填充