我不能使用浮点+ h3太宽

Question

链接到站点

/*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；将"Author: projekcior.com“移到右侧(垂直对齐)？
2. 为什么我的h3标签这么宽？(650 is )

谢谢!

Answer 1

让我分步回答你的问题。

为什么我不能使用float: right；将"Author: projekcior.com“移到右侧(垂直对齐)？

也许是因为，你没有给它设定页边距。它实际上是在网页的右边。我只是试着用保证金来做。

p.white {
   margin: 20px;
}

用这个，从顶角往下掉了一点。

为什么我的h3标签这么宽？(650 is )

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

h3 {
   width: 200px;
}

这是您页面的屏幕截图。

​

​

Answer 2

嘿，卡蒙，我想你没有为你的网页写适当的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我猜通过这个你会达到你想要的结果..。

​

​