Question

我正在做一个用html和css重新创建Google主页的项目。我大部分时间都完成了这个项目，但是我注意到一些令我恼火的怪癖。我已经花了很多时间处理这些怪癖，但是不能让事情发生，我希望他们看看。这些是以下的怪癖：

右上角的图标不与文本的其余部分内联。
出于某种原因，我无法正确对中按钮。
不确定如何处理灰色页脚周围的空白区域。

如果您对上述任何问题有任何意见，我将永远感激不尽！

<body>
<div id="wrapper">
    <div id="header">
        <ul class="navbar">
            <li class="navli"><a href="#"> +You </a>

            </li>
            <li class="navli"><a href="#">Gmail</a>

            </li>
            <li class="navli"><a href="#">Images</a>

            </li>
            <li class="navli" id="icon">
                <img src="http://bit.ly/1NHEwTW" height="auto" width="30" />
            </li>
            <li class="navli"><a href="#">theonlybrianlie@gmail.com</a>

            </li>
        </ul>
    </div>
    <div id="body">
        <div class="logo">
            <img src="https://www.google.com/images/srpr/logo11w.png" />
        </div>
        <div class="searchbar">
            <input type="text" id="search1" />
        </div>
        <div id="buttons">
            <input class="button" id="googlesearch" value="Google Search" type="submit">
            <input class="button" id="secondbutton" value="I'm Feeling Lucky" type="submit">
        </div>
    </div>
    <div id="footer">
        <div id="leftfoot">
            <ul>
                <li class="lf"> <a href="#">Advertising</a>

                </li>
                <li class="lf"> <a href="#">Business</a>

                </li>
                <li class="lf"> <a href="#">About</a>

                </li>
            </ul>
        </div>
        <div id="rightfoot">
            <ul>
                <li class="rf"> <a href="#">Privacy</a>

                </li>
                <li class="rf"> <a href="#">Terms</a>

                </li>
                <li class="rf"> <a href="#">Settings</a>

                </li>
            </ul>
        </div>
    </div>
</div>

.button {
font-family:Arial;
font-size:11px;
font-weight:bold;
display:inline;
height:30px;
border:1px solid #dcdcdc;
background:#f2f2f2;
padding-left: 10px;
}
body, html {
height:100%
}
#wrapper {
min-height:100%;
position: relative;
padding:0;
margin:0;
}
.logo img {
display:block;
width: 269px;
height:95px;
margin:auto;
margin-top: 80px;
padding-top: 112px;
}
#header {
width:100%;
height:100px;
/*background-color:green*/
;
}
.navbar {
/*background-color: red;*/
float: right;
}
.navli {
display: inline-block;
font-family: Arial;
}
.navli a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
}
.navli a:hover {
text-decoration:underline;
}
#icon {
margin-top:10px;
padding-left:15px;
bottom:0;
position:relative;
}
.searchbar {
width:400px;
height:28px;
margin: auto;
display:block;
/*background-color:red;*/
padding-top:10px;
}
#search1 {
width:400px;
height:28px;
margin: auto;
}
#buttons {
display:block;
/*background-color:blue;*/
height: 22px;
width:250px;
margin: auto;
margin-top: 10px;
}
#footer {
position: absolute;
bottom:0;
height:60px;
width:100%;
background-color:#f2f2f2;
clear:both;
display:block;
border-top: 1px solid #e4e4e4;
}
#leftfoot {
width:300px;
left:0;
/*background-color:blue;*/
display: inline-block;
}
.lf {
display: inline-block;
}
.lf a {
text-decoration:none;
color: #404040;
font-size: 13px;
font-family: Arial;
padding-left: 15px;
}
.lf a:hover {
text-decoration: underline;
}
#rightfoot {
width:250px;
float:right;
/*background-color:blue;*/
padding:0;
margin:0;
}
.rf {
display: inline-block;
margin:auto;
}
.rf a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
font-family: Arial;
}
.rf a:hover {
text-decoration: underline;
}

Answer 1

如果您的右上角图标不与菜单的其余部分内联，我会像这样改变CSS

.navli {
  display: inline-block;
  font-family: Arial;
  float: left;
  height: 30px;
  line-height: 30px;
}

#icon {
  /* margin-top: 10px; */
  padding-left: 15px;
  /* bottom: 0; */
  /* position: relative; */
}

对于没有居中的按钮：

将text-align:center;添加到#buttons

对于页脚上的空白区域：

body上有一个保证金，因此请将body,html更改为：

body, html {
  height: 100%;
  margin: 0;
}

更新

这里是JSFiddle - Full Screen Preview - JSFiddle View

Answer 2

我会尽量简明扼要地回答这些问题：

1-标题是内联的，您的图标高于其他内联元素。在那里播放文本元素的边距和填充。

2-将您的按钮放在他们自己的div或section元素中，并使用text-align：center将它们置于页面中心

3-在您的页脚元素中添加一个class =“container-fluid”。

重新创建Google主页（html / css）：有关定位的问题

2 个答案: