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

Stack Overflow用户

提问于 2013-08-20 19:17:10

回答 1查看 485关注 0票数 0

我的代码柱塞器

我试图创建一个流畅的布局，我的侧边栏是由一个链接列表。我希望每个<li>元素都是一个完美的正方形，当我在里面添加文本时，问题就开始了。它似乎增加了我的正方形的高度，我得到的是一个矩形。如果检查我的代码，列表objects的维度是32pxX43px。如何防止内部文本扩展<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>

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-08-20 20:29:21

您可以在li上使用li，在a上使用position: absolute。使用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;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18343300

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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