0

我的代码 - 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>

4

1 回答 1

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;
}
于 2013-08-20T20:29:21.167 回答