html - 导航栏扩展可点击区域

Question

我一直在研究 HTML 和 CSS，但遇到了问题。如何使左右填充也具有链接属性？

<div class="baraNavigatie">
            <ul class="lista">
                <li><a href="default.html">Bine ati venit!</a></li>
                <li><a href="cinesunt.html">Cine sunt?</a></li>
                <li><a href="ceofer.html">Ce ofer?</a></li>
                <li><a href="evenimente.html">Evenimente</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>

^部分HTML代码^

li{
    font-size:25px;
    display:inline;
    padding-left:40px;
    padding-right:40px;
}
.baraNavigatie{
    height:33px;
    background-color:blue;
    text-align:center;
}
li a{
    text-decoration:none;
    color:white;
    font-weight:bold;
    font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}
li:hover{
    background-color:#6a92ff;
}

^CSS^

也很抱歉我的英语不好。

Answer 1

简单 - 只需应用 padding-left和 padding-right到 <a>元素而不是 <li> . The <a> tag creates a clickable link .

试试这个:

li {
  font-size:25px;
  display:inline;
}
.baraNavigatie {
  height:33px;
  background-color:blue;
  text-align:center;
}
li a {
  padding-left:40px;
  padding-right:40px;
  text-decoration:none;
  color:white;
  font-weight:bold;
  font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}
li:hover {
  background-color:#6a92ff;
}