Question

希望只是一个简单的问题：我试图让我的导航栏出现在我的徽标旁边，但是它无效。我已经尝试过在其他问题上提供的解决方案，但似乎都没有。我试过漂浮：左;为我的标题和浮动：右;对于导航，但它无法正确显示。预先感谢您的帮助。这是我的代码：

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

只需对您的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正在产生问题。通常，对于这种情况，您应该使用左右填充。

＆LT; ------------- ------------ UPDATE＆GT;

要占据整个宽度，请执行以下操作

*{
    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;   
}

将导航栏与标题图像对齐

1 个答案: