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

#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: Я хочу сделать элементы списка немного большими (выше). Я попытался изменить прокладку (начатое перекрытие, перекрывающее друг друга) и высоту (они были размещены дальше друг от друга, все еще имеющие одинаковую высоту). Как я могу это сделать?

Задача 3: Как вы можете видеть, слева и справа не имеют одинаковой высоты. Можно ли сделать так, чтобы высота всегда была одинаковой для обеих (и в настоящее время наибольшей высоты любой из них).

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

 
#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>