Question

使用下面的代码我期待一个绿色矩形和一个相同大小的红色矩形。但相反，红色是绿色的一半

有任何建议如何使它大小相同吗？

<html>
  <head>
    <style type="text/css"> 
      #menu ul{list-style:none;}   
      #menu ul li{float:left;width:103px;height:43px;border:5px solid green;}
      #menu ul li #menu1 {border:solid 2px red;}
    </style>
  </head>

  <body>
    <div id="menu">
      <ul>
        <li><div id="menu1"><a href="#">1 </a></div></li>
      </ul>
    </div>
  </body>
</html>

Answer 1

设置#menu1

的高度

请参阅here

Answer 2

你得到不同的高度，因为li的固定高度为43px而#menu1没有。如果您希望填补空白，请为height:39px

添加#menu1

演示： http://jsfiddle.net/EyMhe/

Answer 3

红色是绿色的一半，因为绿色具有明确的高度，而红色则从其内容（单行文本）推断其高度。明确增加红色的高度：

#menu ul li #menu1 {border:solid 2px red; height:41px;}

Answer 4

您只设置了绿色矩形的大小。

请参阅： http://dabblet.com/gist/2225892

块元素从0开始。当您向他们添加内容时，他们会相应地改变高度。

1个字符没有父元素那么大，因此它不会那么大。

在这种情况下，您需要将高度设置为100％以及框大小，因为您希望边框位于父级内。

Answer 5

这是我用过的CSS。

#menu ul{list-style:none;} #menu ul li{float:left; width:103px; height:43px; border:5px solid green; position:relative; padding:0 0 3px 0 ;} #menu ul li #menu1 { border:solid 2px red; height:100%; }

注意第一件事是添加height:100%;，但也因为边界。我还在封面底部添加了一半大小的填充。如果你删除它，你会看到更好。

DEMO

Answer 6

您可以通过以下方式使大小相同：

从封装li元素
让div占据其父级的100％高度。以％为单位设置高度仅在元素具有固定宽度时才有效

如果从li中删除尺寸属性，它将变得非常小（与其内容一样小）。为了扩大规模，您可以在width:103px;height:43px;而不是div上设置li。 li将环绕DIV。例如：

#menu ul li #menu1 {border:solid 2px red;width: 100px;height: 40px}

或者如果您希望文本位于框中间：

#menu ul li #menu1 {border:solid 2px red;width: 100px;line-height: 40px}

边框颜色的CSS问题

6 个答案: