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）：

Screenshot

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

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

问题3：如你所见，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

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

.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列表项目宽度相同

2 个答案: