Question

I read a lot of questions and answers. But nothing works for me.

The a should fill out the whole li. It should be responsive that's why I use padding: 3%.

I try to set a { display:block; } and I try to give it the padding. But nothing works great.

ul {
  list-style: none;
  padding: 0;
}
li {
  float: left;
  border: 1px solid red;
  padding: 3%;
}
a {
  display: block;
  border: 1px solid green;
}

<ul>
  <li><a href="#">test1</a></li>
  <li><a href="#">test2</a></li>
  <li><a href="#">test3</a></li>
</ul>

Answer 1

我不确定这是否是您想要的，但您是否尝试将 a 标记放在 li 元素之外？

编辑：简化了答案

示例：

＆＃13;

ul{
  list-style:none;
  padding:0;
}
ul li a {
  border: 1px solid green;
  padding: 3%;
  float: left;
}

＆＃13;

<ul>
  <li><a href="#">Test1</a></li>
  <li><a href="#">Test1</a></li>
  <li><a href="#">Test1</a></li>
</ul>

＆＃13;

Answer 2

＆＃13;

ul{
  list-style:none;
  padding:0;
}
li{
  float:left;
  border:1px solid red;
  
}
a{
  display:block;
  border:1px solid green;
      padding: 20px;
}

＆＃13;

<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
</ul>

＆＃13;

嘿，请使用此

Answer 3

因为您应该使用margin而不是padding。 a未填写整个li，因为padding在 li内增加了额外的间距。

ul { list-style: none; padding: 0; } li { float:left; border: 1px solid red; margin: 3%; } a { background: #ccc; display: block; border: 1px solid green; }

<ul> <li><a href="#">test1</a></li> <li><a href="#">test2</a></li> <li><a href="#">test3</a></li> </ul>

Answer 4

<a>代码无法填充<li>的原因是因为您padding设置了<li>。要解决此问题，只需从padding移除<li>，然后将其设置为<a>。

但是，百分比padding相对于容器的宽度，因此在padding: 3%上设置<a>时，<li>上设置<ul>时不会给您相同的空间。如果3vw始终为整页宽度，则可以使用视口单元px。否则，您必须使用em，ul { list-style: none; padding: 0; } li { float: left; } a { display: block; border: 1px solid green; padding: 3vw; }等，而且它不会响应。

＆＃13;

<ul>
  <li><a href="#">test1</a></li>
  <li><a href="#">test2</a></li>
  <li><a href="#">test3</a></li>
</ul>

＆＃13;

structure(list(V1 = c(2344, NA, 100, 43), V2 = c(122, 
322, NA, 33), col3 = c(NA_real_, NA_real_, NA_real_, 
NA_real_)), .Names = c("V1", "V2", "col3"), row.names = c(NA, 
-5L), class = "data.frame")

＆＃13;

Answer 5

li元素上的3％填充是从容器（在本例中为：window）宽度计算的。删除它，你得到你想要的东西：

ul{
  list-style:none;
  padding:0;
}
li{
  float: left;
  border:1px solid red;
  padding:0;
}
a{
  display: block;
  border:1px solid green;
}

<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
</ul>

制作<a> to fill out the whole </a> <li> <a> tag

5 个答案: