将导航栏与标题图像对齐
[英]Aligning nav bar to header image
问题描述
希望只是一个简单的问题：我试图让我的导航栏出现在我的徽标旁边，但它不起作用。 我已经尝试过在其他问题上提供的解决方案，但似乎都没有。 我试过漂浮：左; 为我的标题和浮动：右; 对于导航，但它无法正确显示。 预先感谢您的帮助。 这是我的代码：
body{ width:90%; padding-left:3%; padding-right:3%; } header{ float:left; } nav{ background-color: yellowgreen; padding-left: 2em; white-space: nowrap; } header.banner > nav a:link{ font-size:large; text-decoration: none; color:white; margin-right:20%; } header.banner > nav a:hover{ text-decoration: underline; } section{ float:left; column-count:3; column-gap:2em; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <header class="banner"> <a title="Cleveland State University" href="http://www.csuohio.edu/"> <img src="CSU Shield.png" alt="CSUshield" alt="navigation to Cleveland State University's website" /> </a> <nav> <a href="cis.csuohio.edu/~hubteibe/CBA.html">Home</a> <a href="cis.csuohio.edu/~hubteibe/Internships.html">Internships</a> <a href="cis.csuohio.edu/~hubteibe/Co-Ops.html">Co-Ops</a> <a href="cis.csuohio.edu/~hubteibe/Careers.html">Careers</a> </nav> <h1>College of Business Internships, Co-Ops, and Career Programs</h1> </header>
1 个解决方案
解决方案1
2 已采纳 2015-05-31 00:26:41
只需对您的CSS进行以下更改，
header{
float:left;
width:100%
}
header > a{
float: left;
}
nav{
background-color: yellowgreen;
padding-left: 2em;
white-space: nowrap;
float: left;
}
header.banner > nav a:link{
font-size:large;
text-decoration: none;
color:white;
padding: 0 20px;
}
属性margin-right: 20%给予header.banner > nav a:link margin-right: 20% header.banner > nav a:link正在创建问题。 通常，对于这种情况，您应该使用左右填充。
<------------- ------------ UPDATE>
占据整个宽度，做这样的事情，
*{
box-sizing: border-box;
}
header > a{
float: left;
width: 20%;
}
nav{
white-space: nowrap;
float: left;
width: 80%;
margin-bottom: 25px;
}
header.banner > nav a:link{
font-size: large;
text-decoration: none;
color: white;
padding: 16px 20px;
background-color: yellowgreen;
float: left;
width: 25%;
text-align: center;
}
对齐导航栏项目、徽标和图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.