CSS 对齐和大小

Question

我正在设计布局，遇到两个困难：

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

2) 我在 div 中放置了一个 ul，并希望为其设置背景颜色“#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

将您的 div.right padding:1rem 更改为 padding: 12px，您的问题将得到解决。有一个 1rem 填充扩展它因此它比左边的部分大。或者你可以使用 padding: 1rem 1rem 12px 1rem; 所以你在所有方面都得到 1rem 但只有底部是 12px

Answer 2

1

您应该使用 border-box 来更轻松地调整尺寸：

* {
    box-sizing: border-box;
}

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

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>

Answer 3

您可以将右边的容器移到左边的容器中，然后只更改一些填充（例如，将填充添加到 h3 并从 .left 中删除）。较小的容器，在本例中为 .left，然后将增长到其所有内容以适应。

<div class="container">
  <div class="left"><h3 class="header">Calendar</h3>
  <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>

至于你的链接，将它们全部向左浮动并将它们的宽度设置为 25%。您还需要从包含 div

的单元格中丢失 display:table-cell

CSS 对齐和大小

CSS align and size

css

height

vertical-alignment

1

2