Question

我正在建立一个菜单。我有这段代码：

 <nav>

        <ul>
          <li><a href="novy2.html">Kontakt</a></li>
          <li><a href="novy2.html">Reference</a></li>
          <li><a href="novy2.html">Moje služby</a></li>
          <li><a href="novy2.html">Kdo jsem</a></li>
        </ul>
     </nav>

和CSS：

    nav{
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}


nav li{
float: right;
padding: 20px 35px 0 0px;
}

nav ul{
margin-right: 100px;
height: 90px;
list-style-type: none;
}


nav a{
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
}


nav a:hover{
text-align: center;
color: 33adae;

我要做的是使链接可以像整个导航栏高度的块一样点击。我的方式到目前为止，您只能单击链接中的文本。

Answer 1

通常所需要的只是。

nav a{
display:block;
}

然而，对于更完整的示例，通常更容易让链接确定标题的高度。

对于居中，请勿使用浮点数，将ul设置为text-align:center，将li设置为display:inline-block。

* {
  margin: 0;
  padding: 0;
  ;
  box-sizing: border-box;
}
nav {
  border-top: 3px solid red;
  border-bottom: 1px solid gray;
  background-color: white;
  overflow: hidden;
  /* clearfix */
}
nav li {
  display: inline-block;
}
nav ul {
  list-style-type: none;
  text-align: center;
}
nav a {
  display: block;
  text-decoration: none;
  color: black;
  font-size: 17px;
  font-family: Montserrat;
  font-weight: 700;
  height: 90px;
  line-height: 90px;
  padding: 0 25px;
}
nav a:hover {
  text-align: center;
  color: 33adae;
  background: plum;

<nav>
  <ul>
    <li><a href="novy2.html">Kontakt</a>

    </li>
    <li><a href="novy2.html">Reference</a>

    </li>
    <li><a href="novy2.html">Moje služby</a>

    </li>
    <li><a href="novy2.html">Kdo jsem</a>

    </li>
  </ul>
</nav>

Answer 2

您可以从li中删除填充，然后将其添加到a标记中。请参见示例http://codepen.io/anon/pen/gaGxpb

Answer 3

将<li>填充移至<a>个孩子，并为链接指定一个高度：

参见 codepen

注意：在链接中添加了边框，以便您看到边界。

Answer 4

将链接显示为块display: block;，并使用line-height为其提供所需的高度。试试这个：

＆＃13;

nav {
  width: 100%;
  height: 90px;
  border-top: 3px solid red;
  border-bottom: 1px solid gray;
  background-color: white;
}
nav li {
  float: right;
  padding: 0px 35px 0 0px;
}
nav ul {
  margin: 0 100px 0 0;
  height: 90px;
  list-style-type: none;
}
nav a {
  display: block;
  line-height: 90px;
  text-decoration: none;
  color: black;
  font-size: 17px;
  font-family: Montserrat;
  font-weight: 700;
}
nav a:hover {
  text-align: center;
  color: 33adae;

＆＃13;

<nav>

  <ul>
    <li><a href="novy2.html">Kontakt</a></li>
    <li><a href="novy2.html">Reference</a></li>
    <li><a href="novy2.html">Moje služby</a></li>
    <li><a href="novy2.html">Kdo jsem</a></li>
  </ul>
</nav>

＆＃13;

Answer 5

这是我的版本使用高度和属性而不是填充，我使用背景颜色，所以你可以看到如何工作：http://codepen.io/aluknot/pen/wKrqaG

HTML：

<nav>
    <ul>
        <li><a href="novy2.html">Kontakt</a></li>
        <li><a href="novy2.html">Reference</a></li>
        <li><a href="novy2.html">Moje služby</a></li>
        <li><a href="novy2.html">Kdo jsem</a></li>
    </ul>
</nav>

CSS：

nav {
    width: 100%;
    height: 90px;
    border-top: 3px solid red;
    border-bottom: 1px solid gray;
    background-color: white;
}

nav li{
    float: right;
    background: red;
    text-align: center;
    height: 100%;
    width: 120px;
    line-height: 90px
}

nav ul{
    margin: 0;
    padding-right: 100px;
    height: 90px;
    list-style-type: none;
    background: green;
}

nav a{
    text-decoration: none;
    color: black;  
    font-size: 17px;
    font-family: Montserrat;
    font-weight: 700;
    display: block;
    width: 100%;
    height: 100%;
    background: blue;
}

nav a:hover {
    background: black;
    color: white;
}

制作像clicable块一样的链接

5 个答案: