Как сделать края коробки одинаковыми?

Question

Я делаю вертикальный список ссылок, но я не хочу просто текст, я хочу фон. Я добавил это и установил «padding-right» и добавил 25px. После этого я заметил, что размеры различаются в зависимости от текста.

Я понимаю, что я мог бы просто отредактировать его в HTML, но я также хочу, чтобы он менялся в зависимости от того, было ли оно зависанием или нет.

Кроме того, я попытался установить ширину, но это не сработало.

Заранее благодарен.

HTML

<ul id="sidelinksleft"> 
<li><a href="quickstart.html">Quick Start</a></li> 
<li><a href="tagsmain.html">Tag Helper</a></li> 
<li><a href="html.html">HTML</a></li> 
<li><a href="css.html">CSS</a></li> 
<li><a href="photoshop.html">Photoshop</a></li> 
</ul> 

CSS

#sidelinksleft{ 
width:90%; 
margin-left:auto; 
margin-right:auto;; 
height:25px; 
position:relative; 
clear: right; 
float:left; 
} 

#sidelinksleft li{ 
position:relative; 
top:2px; 
padding-right:20px; 
list-style-type: none; 
} 

#sidelinksleft li a{ 
color:#777777; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
background-color:#B2FF99; 
height:17px; 
position:relative; 
border:1px solid black; 
padding-right:25px; 
} 

#sidelinksleft li a:hover{ 
color:#a3a3a3; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
} 

#sidelinksleft li a:active{ 
color:#00B2EE; 
font-size:13px; 
font-family: sans-serif; 
text-decoration:none; 
} 

Answer 1

Если удалить ширина: 90% от #sidelinksleft, а затем добавьте следующие они будут в конечном итоге, как тот же размер:

jsFiddle

#sidelinksleft li a { 
    width:100%; 
    display:block; 
    margin-bottom:2px; 
} 

Так что это делает, расширяя все элементы a, чтобы заполнить 100% своего родителя, который, в свою очередь, является шириной самого большого ребенка.

FYI Вам необходимо нанести его на элемент a (не только li), если вы хотите, чтобы вся область вызывала связь.

Answer 2

В настоящее время, цвет фона и отступы задаются для a элементов, которые различаются по размеру в зависимости от их содержания, потому что они рядный. Вот почему вы не можете изменить ширину на якорях - они встроены, а не в блок.

Возможно, вам лучше переместить цвет фона и стили границ в элементы li и добавить немного поля и ширины для их распространения. Пример:

#sidelinksleft li a { /* remove border and bg declarations */ } 
#sidelinksleft li { 
    background-color:#B2FF99; 
    border:1px solid black; 
    margin: 5px; 
    width: 40%; 
}