Question

我不确定如何在<ul>容器中放置文本而不会导致<li>溢出。我究竟做错了什么？ http://jsfiddle.net/ewAtr/

Answer 1

您没有考虑边距和边框宽度。

Answer 2

正如prodigitalson所说，div#listed的高度应该包括li的边距和边框宽度。

我希望将height:auto用于div，并将clearfix用于ul，就像在这个编辑过的小提琴中一样：http://jsfiddle.net/rJkL8/

Answer 3

尝试使用最后一个孩子定位最后一个li。

Answer 4

  #listed {
    height: 50px;
    width: 330px;

  }

  #listed ul {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    list-style-type:none;

  }

  li.item {

     float: left;
     margin-top:10px;
  }

  #listed ul li a {

     font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
     font-size: 15px;
     color: blue;
     text-align: center;
     text-decoration: none;
     padding:15px 10px;
     border-left: 1px solid #ddd;
     border-bottom:1px solid #ddd;
  }

  #listed ul li a:hover{
     font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
     font-size: 15px;
     color: white;
     background-color: blue;
     text-align: center;
     text-decoration: none;
  }

Answer 5

快速而肮脏的方式是溢出：隐藏在父级div上，如this updated jsFiddle

中所示

样式化内联列表

5 个答案: