好的，所以我正在尝试将我的链接放置在我的导航栏中，以便它们位于栏的右侧。
问题是元素离开了屏幕。
这是链接
https://c9.io/ashg1990/secure/workspace/client/index.html
我的html在下面
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8" />
<title>ARG Modular</title>
<div class="head">
<img class="header" src="img/headlogo.png" alt="logo" />
<ul class="nav-main"><li><a href="/kit">The Kit</a></li><li><a href="/downloads">Downloads</a></li></ul>
</div>
</head>
<body>
</body>
</html>
我的CSS在下面
body {
background-color:#A8A1A3;
width:110%;
}
div.head {
position:absolute;
left:0;
top:0;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #FFFFFF),
color-stop(1, #A8A1A3)
);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #A8A1A3 100%);
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #A8A1A3 100%);
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #A8A1A3 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #A8A1A3 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #A8A1A3 100%);
width:110%;
border-bottom:thick groove #000000;
}
img.header {
display: block;
margin-left: 10px;
margin-top: 5px;
}
ul {
text-align:right;
}
ul.nav-main{
padding:0px;margin:0;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #1B211F),
color-stop(1, #525B58)
);
background-image: -o-linear-gradient(bottom, #1B211F 0%, #525B58 100%);
background-image: -moz-linear-gradient(bottom, #1B211F 0%, #525B58 100%);
background-image: -webkit-linear-gradient(bottom, #1B211F 0%, #525B58 100%);
background-image: -ms-linear-gradient(bottom, #1B211F 0%, #525B58 100%);
background-image: linear-gradient(to bottom, #1B211F 0%, #525B58 100%);
}
li{
display:inline-block;
padding:10px 0px 10px 10px;
}
a {
text-decoration:none;
color: #535E5A;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #6592A9, 0 0 30px #6592A9, 0 0 40px #ff2d95, 0 0 50px #6592A9, 0 0 75px #6592A9;
letter-spacing: 5px;
font: 30px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-right: 20px;
}
li {
margin:10px 10px 10px 10px;
}
谁能帮我修好它，让它正确地坐在右边
最佳答案
.head {
width: 100%;
}
代替 width: 110%;
此外，无需过度限定选择器:
.header 而不是 img.header
.head 而不是 div.head
关于html css 导航栏列表进入屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23187591/