我不能太使用float + h3

Question

Link to site

/*Align width 1170px*/
.align-1170{
    height: 100%;
    width: 1170px;
    margin: 0 auto;
}

/*Align vertically*/
.align-vertically{
    height: 100%;
    display: table;
}



/*Header*/

header{
    height: 60px;
    width: 100%;
    background-color: #1ccb56;

}

.logo{
    display: table-cell;
    vertical-align: middle;
}

.author{
    float: right;
    display: table-cell;
    vertical-align: middle;
}

1. 为什么我不能使用float：right;将“作者：projekcior.com”移到右侧 （垂直对齐）？
2. 为什么我的h3标签太宽了？ （650像素）

谢谢！

Answer 1

浮动元素自动

display: block;

使用

h3 { display:inline-block; }

管理你的h3宽度。

Answer 2

让我逐步回答你的问题。

  

为什么我不能使用float：right;将“作者：projekcior.com”移到右侧（垂直对齐）？

也许是因为，你没有为它设置边距。它实际上是在网页的右侧。我只是试图使用保证金。

p.white {
   margin: 20px;
}

使用它，从顶角开始有点下降。

  

为什么我的h3标签太宽了？ （650像素）

因为您没有为元素设置任何width: value，所以浏览器会自动设置宽度。我使用width属性来减小大小。

h3 {
   width: 200px;
}

以下是您网页的屏幕截图。

Answer 3

嘿Komon我猜你没有为你的网页写一个合适的CSS，所以我试着纠正你的页面，看到下面提到的 CSS ： -

<强> CSS

.align-vertically {
    border: 1px solid;
}
.align-1170 {
    height: 100%;
    margin: 0 auto;
    width: 1170px;
}
.logo {
    float: left;
}
h3 {
    border: 1px solid;
    display: inline-block;
    font-family: 'Lato',sans-serif;
    font-size: 1.5em;
}
.author {
    float: right;
}

看到css并尝试了解你的错误，实际上你的父div没有浮动，这就是为什么你的孩子div无法控制......

申请这个css我想通过这个你将达到你想要的结果......