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

导航栏扩展了可点击区域

1 个答案: