CSS对齐导航栏

目前，该文本是在底部，我希望它在中间所以上面和下面的链接，空间同样数额???

这将是什么正确的CSS？

body{ 
 
\t margin:0px; 
 
\t padding:0px; 
 
\t font-family: 'Comfortaa', cursive; 
 
\t text-align:center; 
 
} 
 

 
input[type="text"], input[type="password"]{ 
 
\t outline:none; 
 
\t padding:10px; 
 
\t display:block; 
 
\t width:300px; 
 
\t border-radius: 3px; 
 
\t border:1px solid #eee; 
 
\t margin:20px auto; 
 
} 
 

 
input[type="submit"]{ 
 
\t padding:10px; 
 
\t color:#fff; 
 
\t background:#0098cb; 
 
\t width:320px; 
 
\t margin:20px auto; 
 
\t margin-top:0px; 
 
\t border:0px; 
 
\t border-radius: 3px; 
 
\t cursor:pointer; 
 
} 
 

 
input[type="submit"]:hover{ 
 
\t background:#00b8eb; 
 
} 
 

 
.phone{ 
 
\t border-bottom:1px solid #eee; 
 
\t padding:10px 0px; 
 
\t width:100%; 
 
\t overflow: hidden; 
 
\t text-align: right; 
 
\t font-weight: bold; 
 
\t padding-right: 20px; 
 
\t float:right; 
 
\t background-color:#2c2c2f; 
 
\t color: #fff; 
 
} 
 

 
.header{ 
 
\t border-bottom:1px solid #eee; 
 
\t padding:10px 0px; 
 
\t width:100%; 
 
\t text-align:left; 
 
\t overflow: hidden; 
 
\t padding-bottom: 20px; 
 
} 
 

 
#logo { 
 
\t padding-left: 10px; 
 
\t align-content: left; 
 
} 
 

 
.header a{ 
 
\t color:#333; 
 
\t text-decoration: none; 
 
\t margin-left: 20px; 
 
} 
 

 
.header a.active { 
 
\t color: red; 
 
} 
 

 
.footer { 
 
\t border-top:1px solid #eee; 
 
\t font-size:50%; 
 
\t position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title</title> 
 
\t <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> 
 
\t <link rel="stylesheet" type="text/css" href="global.css"> 
 
</head> 
 
<body> 
 
<div class="phone"><a>Freephone: 0800 96 161</a></div> 
 
<div class="header"> 
 
<img id="logo" src="images\logo.png" alt="logo"> 
 
<a href="index.html">Home</a> 
 
<a href="products.html">Products</a></div> 
 

 
\t <h1></h1> 
 

 
<div class="footer"> 
 
<p><b></p> 
 
</div> 
 
</body> 
 
</html>

//编辑补充的完整代码的人来看待，这将可能是更为有用

来源

2017-04-08 LewisJUK

填充BOTTOM只是向下移动行？ – LewisJUK

你能提供一个片段来处理，我的意思是完整的HTML以及CSS？ –

在jsfiddle.net上发布会很棒。 – pshep123

现在它工作正常

<div class="header"> 
 
\t <img id="logo" src="https://s-media-cache-ak0.pinimg.com/736x/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg" alt="logo"> 
 
\t <a href="index.html">Home</a> 
 
\t <a href="products.html">Products</a> 
 
</div>

header{ 
 
    display: flex; 
 
} 
 
header a { 
 
    display: flex; 
 
    align-items: center; 
 
}

来源

2017-04-08 20:45:08

尝试列表项的行高设置为相同的高度FO报头：

.header{ 
    border-bottom:1px solid #eee; 
    width:100%; 
    text-align:left; 
    overflow: hidden; 
    height: 40px; /* This same as */ 
} 

.header a{ 
    color:#333; 
    text-decoration: none; 
    margin-left: 20px; 
    line-height: 40px; /* This */ 
}

body{ 
 
\t margin:0px; 
 
\t padding:0px; 
 
\t font-family: 'Comfortaa', cursive; 
 
\t text-align:center; 
 
} 
 

 
input[type="text"], input[type="password"]{ 
 
\t outline:none; 
 
\t padding:10px; 
 
\t display:block; 
 
\t width:300px; 
 
\t border-radius: 3px; 
 
\t border:1px solid #eee; 
 
\t margin:20px auto; 
 
} 
 

 
input[type="submit"]{ 
 
\t padding:10px; 
 
\t color:#fff; 
 
\t background:#0098cb; 
 
\t width:320px; 
 
\t margin:20px auto; 
 
\t margin-top:0px; 
 
\t border:0px; 
 
\t border-radius: 3px; 
 
\t cursor:pointer; 
 
} 
 

 
input[type="submit"]:hover{ 
 
\t background:#00b8eb; 
 
} 
 

 
.phone{ 
 
\t border-bottom:1px solid #eee; 
 
\t padding:10px 0px; 
 
\t width:100%; 
 
\t overflow: hidden; 
 
\t text-align: right; 
 
\t font-weight: bold; 
 
\t padding-right: 20px; 
 
\t float:right; 
 
\t background-color:#2c2c2f; 
 
\t color: #fff; 
 
} 
 

 
.header{ 
 
\t border-bottom:1px solid #eee; 
 
\t width:100%; 
 
\t text-align:left; 
 
\t overflow: hidden; 
 
    height: 40px; /* This same as */ 
 
} 
 

 
#logo { 
 
\t padding-left: 10px; 
 
\t align-content: left; 
 
} 
 

 
.header a{ 
 
\t color:#333; 
 
\t text-decoration: none; 
 
\t margin-left: 20px; 
 
    line-height: 40px; /* This */ 
 
} 
 

 
.header a.active { 
 
\t color: red; 
 
} 
 

 
.footer { 
 
\t border-top:1px solid #eee; 
 
\t font-size:50%; 
 
\t position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title</title> 
 
\t <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> 
 
\t <link rel="stylesheet" type="text/css" href="global.css"> 
 
</head> 
 
<body> 
 
<div class="phone"><a>Freephone: 0800 96 161</a></div> 
 
<div class="header"> 
 
<img id="logo" src="images\logo.png" alt="logo"> 
 
<a href="index.html">Home</a> 
 
<a href="products.html">Products</a></div> 
 

 
\t <h1></h1> 
 

 
<div class="footer"> 
 
<p><b></p> 
 
</div> 
 
</body> 
 
</html>

来源

2017-04-08 20:37:27

CSS对齐导航栏

回答

相关问题