Question

我正在创建这个基础结构：

<ul>
<li>
<a>
blabla

</a>
</li>
</ul>

用css：

ul{
  height: 100%;
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

ul li{
  height: 25%;
  text-align: right;
  width: 100%;
}

a{
  display: block;
  float: right;
  height: 75%;
  padding-right: 2%;
  position: relative;
  width: 98%;
  padding-top:25%;
}

我无法简单地将a放在最底层...... 我认为A的高度为25％，填充率为75％，但它需要75％的UL而不是75％的LI。

任何人都知道怎么回事？

非常感谢

Answer 1

你到底想要达到什么目的？

如果我假设正确，您希望<li>的容器高度为25％，<a>位于<li>的右下角

如果是这种情况，你可以使用这个css

更新了RE评论在这种情况下，我们可以使用<span>内的<a>来定位文字并设置<a>以填充{{1} }}

<li>

和html

ul {
  height: 100%;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  background-color: red;
}

li {
  height: 25%;
  text-align: right;
  width: 100%;
}

a {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  background-color: blue;
}

span {
  display: block;
  position: absolute;
  bottom: 0;
  padding: 2%;
  width: 96%;
  background-color: green;
}

Fiddle here

请注意，要使其正常工作，您需要设置<ul> <li><a href="#"><span>blabla</span></a></li> </ul>或设置一个具有明确高度设置的容器。即html, body { height:100%; }或ul { height: 200px; }

我还建议通过类来应用这些样式。

ul li a＆＃34; jumps＆＃34;李

1 个答案: