Question

刚刚开始编写一个网站，所以没有太多的代码可以通过，但我的标题是如何对齐的问题。如果你在互联网浏览器和Chrome中查看this page，你会发现登录框在chrome中不合适。

这是我的样式表：

    body {

}


.header {
background: url(img/header-bg.png) repeat-x;
}
a {}
.header_links_left {
font-family: Tahoma,Geneva,Kalimati,sans-serif;
font-size:20px;
text-decoration:none;
color: #FFFFFF;
padding-right:30px;
top:3px;
}
.header_links_right {
font-family: Tahoma,Geneva,Kalimati,sans-serif;
font-size:20px;
text-decoration:none;
color: #FFFFFF;
padding-left:25px;
padding-right:5px;
float: right;
top:3px;
}
.align_right{
right:0px;
position:fixed;
}
h1{}
.header1{
font-family: Tahoma,Geneva,Kalimati,sans-serif;
font-size:40px;
padding-top:-3px;
}

如果你能让我知道造成这种情况的原因那会很棒，谢谢。

Answer 1

更改相应行中的此css代码。它会显示您的预期输出。

10号线的style.css

.header_links_left {
font-family: Tahoma,Geneva,Kalimati,sans-serif;
font-size: 20px;
text-decoration: none;
color: #FFFFFF;
padding-right: 30px;
float: left;
}

35号线的style.css

.header1 {
    font-family: Tahoma,Geneva,Kalimati,sans-serif;
    font-size: 40px;
    padding-top: 3px;
    float: left;
    width: 100%;
    }

Answer 2

添加clearfix可修复您遇到的问题。

.clearfix {
    display: table;
    clear:both;
    content: " ";
}

您可以将该类添加到body标签。

另外，我建议您添加CSS重置。或者你可以使用normalize.css

我怎么能修复这在chrome中的样子

2 个答案: