CSS 对齐和大小

Question

我正在设计一个布局，我遇到了两个困难:

1) 不明白为什么日历所在的 div 的高度(绿色)与其父级不同。

2) 我将一个 ul 放在一个 div 中，并想为其设置背景颜色“#d1d2e0”(全宽)。它只会连接到“Link four”。

div.container
{
width:100%;
margin:0px;
background: #005884;
}

div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
color: #d1d2e0;
background: green;
}

h3.header
{
padding:0;
margin:0;
}

div.right
{
margin-left:190px;
padding:1em;
text-align: right;
}

label.year{
	padding: 0.4em 0.6em;
    margin: 0;
	background: #d1d2e0;
	color: #36384e;
    border-bottom: 1px solid #d1d2e0;
}

select#DropYear{
	background: #36384e;
	color: #d1d2e0;
	width: 70px;
	height: 30px;
	margin: 0;
	font-size: 16px;
	text-align: center;
	text-align-last: center;
}

div.nav{
    width: 100%;
    height: 30px;
	color: 5px soldi red;
    display: table-cell;
    vertical-align: middle;
}

ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    float: left;
    width: 6em;
    text-decoration: none;
    color: #005884;
    background-color: #d1d2e0;
    padding: 0.2em 0.6em;
    border-right: 1px solid white;
}

a.last { border-right: none; }

li.nav {
	display: inline;
    text-align: center;
}

.form{
	width: auto;
    height: 60px;
	background: lightgrey;
}

select.form{
}

.content{
	margin: 5px 0px;
	width: auto;
    height: 150px;
	background: yellow;
}

.footer{
	width: auto;
    height: 20px;
	background: grey;
}

<div class="container">
  <div class="left"><h3 class="header">Calendar</h3></div>
  <div class="right">
    <label class="year" for="DropYear">Year</label><!--
    --><select id="DropYear" class="drop">
      <option value="2016">2016</option>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
    </select>  
  </div>
</div>
<div class="nav">
  <ul>
    <li class="nav"><a href="#">Link one</a></li>
    <li class="nav"><a href="#">Link two</a></li>
    <li class="nav"><a href="#">Link three</a></li>
    <li class="nav"><a href="#" class="last">Link four</a></li>
  </ul>
</div>
<div class="form"></div>
<div class="content"></div>
<div class="footer"></div>

问候，埃里奥·费尔南德斯

Answer 1

1

您应该使用 border-box 来更轻松地调整大小:

* {
    box-sizing: border-box;
}

然后给你的 .container 一个高度，并告诉它的 child 继承它。

2

接下来，去掉 div.nav 上的 display: table-cell; 并实际给它一个背景色。我根本看不出你试图在哪里设置它。

background: #d1d2e0;

另外，这个属性没有意义:

color: 5px solid red;

它应该是 border: 5px solid red; 或 color: red;。

* {
    box-sizing: border-box;
}

div.container
{
width:100%;
margin:0px;
background: #005884;
height: 62px;
}

div.left
{
float:left;
width:160px;
margin:0;
/*padding:1em; don't need this */
color: #d1d2e0;
background: green;
height: 100%;
}

h3.header
{
padding: 0 0 0 1em;
margin:0;
line-height: 62px;
height: 62px;
}

div.right
{
margin-left:190px;
padding:1em;
text-align: right;
}

label.year{
	padding: 0.4em 0.6em;
    margin: 0;
	background: #d1d2e0;
	color: #36384e;
    border-bottom: 1px solid #d1d2e0;
}

select#DropYear{
	background: #36384e;
	color: #d1d2e0;
	width: 70px;
	height: 30px;
	margin: 0;
	font-size: 16px;
	text-align: center;
	text-align-last: center;
}

div.nav{
    width: 100%;
    height: 30px;
	/*color: 5px solid red; was this supposed to be "border" ? */
    /*display: table-cell; don't need this */
    vertical-align: middle;
    background: #d1d2e0; /* you weren't setting this */
}

ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    float: left;
    width: 6em;
    text-decoration: none;
    color: #005884;
    background-color: #d1d2e0;
    padding: 0.2em 0.6em;
    border-right: 1px solid white;
}

a.last { border-right: none; }

li.nav {
	display: inline;
    text-align: center;
}

.form{
	width: auto;
    height: 60px;
	background: lightgrey;
}

select.form{
}

.content{
	margin: 5px 0px;
	width: auto;
    height: 150px;
	background: yellow;
}

.footer{
	width: auto;
    height: 20px;
	background: grey;
}

<div class="container">
  <div class="left"><h3 class="header">Calendar</h3></div>
  <div class="right">
    <label class="year" for="DropYear">Year</label><!--
    --><select id="DropYear" class="drop">
      <option value="2016">2016</option>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
    </select>  
  </div>
</div>
<div class="nav">
  <ul>
    <li class="nav"><a href="#">Link one</a></li>
    <li class="nav"><a href="#">Link two</a></li>
    <li class="nav"><a href="#">Link three</a></li>
    <li class="nav"><a href="#" class="last">Link four</a></li>
  </ul>
</div>
<div class="form"></div>
<div class="content"></div>
<div class="footer"></div>