Question

好的，所以我试图将我的链接放在我的导航栏中，这样它们就位于栏的右侧。

问题是物品离开了屏幕。

这是一个链接

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

任何身体都可以帮助我修复它，使它正确地位于右侧

Answer 1

.head {
  width: 100%;
}

而不是width: 110%;

此外，无需对选择器进行过度限定：

.header代替img.header

.head代替div.head

html css导航栏列表进入屏幕

1 个答案: