Question

My code - Plunker

我尝试创建流畅的布局，我的侧边栏由链接列表组成。我希望每个<li>元素都是一个完美的正方形，当我在里面添加文本时问题就开始了。它似乎是为我的方块增加高度，我得到的是一个矩形。如果您检查我的代码，我的列表objects的维度就是 32px X 43px。如何防止内部文本扩展<li>元素？如何使文本显示在<li>元素的左下角？

我的CSS：

body{
   width: 100%;
   margin: 0 auto;
 }

 .content {
    width: 95%;
    display: inline;
    float: left;
  }  

  .sidebar{
      width: 5%;
      display: inline;
      float: left;
   }

 .sidebar ul{
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;

  }

 .sidebar li{
    padding: 50%;
    background-color: oldlace;
  }

  .sidebar a{
    display: block;
    font-size: 0.5em;
  }

我的HTML：

 <body >
<h1>Hello Plunker!</h1>

<div class="sidebar">
  <ul>
        <li><a href="#">ANALYTICS</a></li>
        <li><a href="#">STYLES</a></li>
        <li><a href="#">VOTERS</a></li>
        <li><a href="#">GET STARTED</a></li>
        <li><a href="#">UPDATE</a></li>
  </ul>
</div>
<div class="content">
  <p>Blahahhhahhhahahahahahahhahahah blahahahh bluah</p>
</div>

Answer 1

您可以使用position: relative上的li和position: absolute上的a。使用absolute会导致a元素不会影响li的维度。这样你也可以把它放在角落里。

http://plnkr.co/edit/kcjCl1?p=preview

.sidebar li{
      padding: 50%;
      position: relative;
}

.sidebar a{
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
}

如何防止文本扩展<li>容器高度？</li>

1 个答案: