Question

内联和块以及内联块和浮动到宽度和高度的影响是什么？

例如，请看下面的css菜单：

ul
{
    list-style-type:none;border-style:solid;border-width:1px;border-color:Blue;
    padding:0px;
    display:inline-block;
    float:left;
}
ul li{display:inline;}
ul li a
{
    /*display:inline-block;
    float:left;*/
    display:inline-block;
    float:left;
    background-color:rgb(100,170,110);
    color:Yellow;
    text-decoration:none;
    height:30px;
    padding-left:20px;
    padding-top:5px;
    padding-right:20px;
}
ul li a:hover{background-color:Yellow;color:Red;}

我已经在IE和Firefox中更正了这一点，并为ul添加了以下代码：

display:inline-block;
float:left;

对于内联标记，高度= 0？

是否正确？

对于左浮动标记是否为真，它的宽度是其子项的最大宽度？

为什么块元素（例如菜单项）的下一个项目会有一些边距？

Answer 1

你会在IE中使用inline-block获得一些愚蠢的东西。你可能有更好的运气设置阻止和漂浮李。请尝试以下代码

<强> HTML

<nav>
  <ul>
    <li><a href="#">Home</a>
    <li><a href="#">About</a>
    <li><a href="#">Contact</a>
  </ul>
</nav>

<强> CSS

ul { margin: 0; padding: 0; }
li { float: left; }
a { display: block; padding: 5px; margin: 0 5px; }

浮动并显示对宽度和高度的影响

1 个答案: