CSS 列表项宽度相同

Question

我正在页面左侧制作一个带有选项卡的菜单。为此，我一直在使用 <ul> 和 <li> 创建菜单项列表。这是我的 HTML 代码：

<div class="maindiv">
    <div class="leftdiv" id="leftdiv">
        <ul>
            <li id="selrtab"><a href="#">Testerter</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
        <br />
        <form name="restartform" id="restartform" action="wt_start.php" method="post">
            <input type="submit" value="Test">
            <input type="hidden" name="hrestart" value="restartclick">
        </form>
    </div>
    <div class="rightdiv">
        <h1>Välj typ av dagbok</h1>
        <br />
        <br />
        <br />
        <form name="submitform" action="#" method="post">
            <input type="submit" value="Nästa">
        </form>
    </div>
</div>

为了列出清单，我有以下 CSS：

.maindiv {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    height: auto;
    background-color: #cccccc;
    padding-left: 0px;
    padding-top: 15px;
    padding-right: 0px;
    padding-bottom: 0px;
    overflow: hidden;
}

.leftdiv{
    padding-top: 15px;
    width: 165px;
    float: left;
    background-color: #cccccc;
}

.rightdiv{
    overflow: hidden;
    background-color: #aaaaaa;
    padding-left: 10px;
}

#leftdiv ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

#leftdiv li {
    margin: 0 1px 2px 0;
}

#leftdiv a {
    padding: 0 1em;
    text-decoration: none;
    color: #a80;
    background-color: #dddddd;
}

#leftdiv a:hover {
    background-color: #cccccc;
    color: #540;
}0123456789a

#leftdiv #selrtab {
}

#leftdiv #selrtab a {
    margin: 0 -1 2px 0;
    font-weight: bold;
    color: black;
    color: black;
    background-color: #aaaaaa;
}

#leftdiv form {
    margin-top: 10px;
    float: bottom;
}

我有几个问题，我将在下面的截图中尝试解释（maindiv 是粉红色的，以区别于 leftdiv）：

问题 1：如何使所有列表项的宽度相同（固定）？现在，当短列表项目的背景较短时，它看起来很糟糕。

问题2：我想让列表项大一点（高一点）。我试图改变填充（开始重叠，相互覆盖）和高度（它们彼此放置得更远，但仍然具有相同的高度）。我该怎么做？

问题三：可以看到，leftdiv和rightdiv的高度不一样。是否有可能使两者的高度始终相同（以及其中任何一个的当前最大高度）。

Answer 1

问题 1 和 2 可以通过使锚块元素来解决：

#leftdiv a {
    display:block;
    padding: 1em;
}

问题3可以用display:table

解决

.maindiv {
    display:table;
}

.leftdiv{
    display:table-cell;
}

.rightdiv{
    display:table-cell;
}

Example

Answer 2

您可以在 <li> 和 <a> 元素中使用 display: inline-block：

.maindiv {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    height: auto;
    background-color: #cccccc;
    padding-left: 0px;
    padding-top: 15px;
    padding-right: 0px;
    padding-bottom: 0px;
    overflow: hidden;
}

.leftdiv{
    padding-top: 15px;
    width: 165px;
    float: left;
    background-color: #cccccc;
}

.rightdiv{
    overflow: hidden;
    background-color: #aaaaaa;
    padding-left: 10px;
}

#leftdiv ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

#leftdiv li {
    width: 100%;
    float: left;
    display: inline-block;
    margin: 0 1px 2px 0;
}

#leftdiv a {
    width: 100%;
    float: left; 
    text-decoration: none;
    color: #a80;
    background-color: #dddddd;
    padding: 5px 0;
    text-align: center;
}

#leftdiv a:hover {
    background-color: #cccccc;
    color: #540;
}0123456789a

#leftdiv #selrtab {
}

#leftdiv #selrtab a {
    margin: 0 -1 2px 0;
    font-weight: bold;
    color: black;
    color: black;
    background-color: #aaaaaa;
}

#leftdiv form {
    margin-top: 10px;
    float: bottom;
}

<div class="maindiv">
    <div class="leftdiv" id="leftdiv">
        <ul>
            <li id="selrtab"><a href="#">Testerter</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
        <br />
        <form name="restartform" id="restartform" action="wt_start.php" method="post">
            <input type="submit" value="Test">
            <input type="hidden" name="hrestart" value="restartclick">
        </form>
    </div>
    <div class="rightdiv">
        <h1>Välj typ av dagbok</h1>
        <br />
        <br />
        <br />
        <form name="submitform" action="#" method="post">
            <input type="submit" value="Nästa">
        </form>
    </div>
</div>

CSS 列表项宽度相同

CSS list items same width

html

css

html-lists