Question

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 20%;
  margin-left: 10%;
  position: fixed;
  top: 0;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.image {
  width: 20%;
  height: 100%;
  float: left;
  border-style: solid;
  border-width: 1px;
}

.navigation {
  width: 79%;
  height: 100%;
  float: right;
  text-align: right;
  border-style: solid;
  border-width: 1px;
}

li {
  height: 100%;
  display: inline;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

<div class="header">

  <div class="image">
    Image
  </div>

  <nav class="navigation">
    <li> 1.0 Main Menu </li>
    <li> 2.0 Main Menu </li>
    <li> 3.0 Main Menu </li>
  </nav>

</div>

使用上面的代码，我创建了一个由<header>和<image>组成的<navigation>。 <image>和<navigation>与周围<header>的高度完全匹配。

在<navigation>内，我添加了一些<li>元素，我希望它们与周围的<navigation>具有相同的高度。因此，我向他们提供了属性height: 100%;，我也为<image>和<navigation>提供了属性，但它似乎无效。

我需要在代码中更改哪些内容，以便<li>元素与周围<navigation>元素的高度相匹配？

您也可以在此处找到我的代码：https://jsfiddle.net/5jv8m5xf/28/

Answer 1

将li的显示属性更改为inline-block而非inline并解决重叠的div，您可以使用box-sizing: border-box表示所有元件。

要删除li 之间的空间，您可以将font-size: 0设置为nav并重置 { {1}}。

见下面的演示：

li

*{ box-sizing: border-box; } body { margin: 0; } .header { width: 80%; height: 20%; margin-left: 10%; position: fixed; top: 0; border-style: solid; border-width: 1px; background-color: green; } .image { width: 20%; height: 100%; float: left; border-style: solid; border-width: 1px; } .navigation { width: 79%; height: 100%; float: right; text-align: right; border-style: solid; border-width: 1px; font-size: 0; } li { height: 100%; display: inline-block; border-style: solid; border-width: 1px; background-color: blue; font-size: initial; }

Answer 2

我认为你应该制作“li”显示：inline-block能够占据整个高度并使border-width：0因为如果你使它为1，那么“li”将更高的导航：

li {
 height: 100%;
 display: inline-block;
 border-style: solid;
 border-width: 0px;
 background-color: blue;
}

Answer 3

对于list元素的inline-block属性，您必须使用inline而不是display。

<li>元素的高度等于<navigation>的高度

3 个答案: