Question

你好我只是想知道如何在我的html中点击框中的无序列表，而不仅仅是文本。如果您直接单击文本，它目前只会重定向。这是我的HTML

bundle exec jekyll serve --watch

这是我的CSS

    <ul>
        <li><a href="index.html" class="button">Home</a></li>
        <li><a href="page 1.html" class="button">page 1</a></li>
        <li><a href="page 2.html" class="button">page 2</a></li>
        <li><a href="page 3.html" class="button">page 3</a></li>
        <li><a href="page 4.html" class="button">page 4</a></li>
    </ul>

提前致谢。

Answer 1

添加显示：块;到你的按钮元素：

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #f0f;
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
}
.menu li:hover {
  
}
.button {
  text-decoration: none;
  color:red;
  display: block;
}

<html>
<body class="Site" cz-shortcut-listen="true">

 <div class="container">
 <div id="main">
      
    <ul>
        <li><a href="index.html" class="button">Home</a></li>
        <li><a href="page 1.html" class="button">page 1</a></li>
        <li><a href="page 2.html" class="button">page 2</a></li>
        <li><a href="page 3.html" class="button">page 3</a></li>
        <li><a href="page 4.html" class="button">page 4</a></li>
    </ul>
    
</body>
</html>

Answer 2

请尝试以下操作，将display的{{1}}更改为a tag并为其指定display:inline-block，这样就可以了，因为您无法更改html格式，因此这样可行

width of 100%

.menu li > a{
  width:100%;
  display:inline-block;
}

.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #f0f;
color: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
}
.menu li:hover {
background-color: #0099cc;
}
.menu li > a{
  width:100%;
  display:inline-block;
}
.button {
text-decoration: none;
color:white;
}

如何使html中的无序列表全部可点击

2 个答案: