Question

我对任何类型的编码都很陌生。我正在建立自己的网站学习。我正在尝试创建一个菜单栏，我已经让它适合我，除了“联系人”按钮应该在栏的左边，其他两个应该在左边;到目前为止，这三个都排在左边。我的HTML代码

<head>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DBH Portfolio</title>
<link href="../_script/boilerplate.css" rel="stylesheet" type="text/css">
<link href="../_script/fluidlayout_p.css" rel="stylesheet" type="text/css">
<link href="../_script/menu_bar_p.css" rel="stylesheet" type="text/css">

<!--Link to reset css-->
<link href="../_script/reset.css" rel="stylesheet" type="text/css">
<!--Link to Metamorphous font css-->
<link href='http://fonts.googleapis.com/css?family=Metamorphous' rel='stylesheet' type='text/css'>


<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="../_script/respond.min.js"></script>
<style>
body {background-image:url("../_images/background.jpg");
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-ms-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}
</style>
</head>
<body>
<div class="gridContainer clearfix">
<div id="naviwrapper">
<div class="gradient">
<div id="navigation"></div>

<div id="logo">
<ul class="logo_navi">
<li><a href="../_pages/home.html" class="cent_navi"></a>
<img src="../_images/logo.png" width="59" height="49" class="logo-home"></li>
</ul>
</div>

<div id="left_navi">
<ul class="main"> 
<li><a href="#" class="top-menu home">Home</a></li> 
<li><a href="#" class="top-menu port">Portfolio</a></li> 
</ul>


<ul style="float:right; right:-1px; position:relative;" class="right">
<li><a href="#" class="top-menu contact">Contact me</a></li>
<ul class="social">
<li><a href="#" class="top-menu email">E-Mail</a></li>
<li><a href="#" class="top-menu fb">Facebook</a></li>
<li><a href="#" class="top-menu li">Linkedin</a></li>
</ul>
</ul>

</div>
</div>

<div id="header">
<p>This is my portfolio</p>

</div>
<div id="images">

</div>
</div>

</div>
</body>
</html>

我的CCS代码表。

#logo {
display:block;
float:left;
position:fixed;
padding-top:5px;
background-color:#212121;
top:30px;
left:35px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-bottom-right-radius:15px;
-moz-border-radius-bottomright:15px;
border-bottom-left-radius:15px;
-moz-border-radius-bottomleft:15px;
}
#logo ul {
padding:6px;
}

#navigation {
width: 100%;
position: fixed;
top:0;
left:0;
height: 35px;
margin-left:auto;
margin-top:0;
margin-right:auto;
margin-bottom:0;
background-color:#212121;
}

#left_navi{
position: fixed;
top:0;
left:0;
height: 35px;
line-height: 10px;
margin-left:auto;
margin-top:0;
margin-right:auto;
margin-bottom:0;
-webkit-padding-start: 71px;

}
#left_navi ul {
font-family: 'Metamorphous', cursive,;}

#left_navi ul.main {
float:left;
padding:0;
margin:0;
border-left: 1px solid rgba(255, 255, 255, 0.11);
box-shadow: -1px 0 0 rgba(15, 15, 15, 0.5);

}

#left_navi ul li{
float:left;
}

#left_navi ul li
.top-menu {
border-right: 1px solid rgba(15, 15, 15, 0.5);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.11);
width: 80px;
padding: 13px 27px 12px;
color: white;
font-family: 'Metamorphous', cursive,;
font-size: 10px;
font-weight: normal;
text-decoration: none;
display:inline-block;
white-space: nowrap;
list-style:none;
display: block;
transition:all 0.5s;
}
#left_navi ul li
.top-menu:hover {
background-color: red;
}

/*hides dropdown menu*/
#left_navi ul.social {
display:none;
top:35px;   
position: absolute;
background:#212121;

}

#left_navi ul.right:hover ul{
display:block;
}

#header {
margin-top:50px;
color:#FFF;
}

Answer 1

你不会在彼此里面两个人。使用div代替我们的等等。并且因为代码是这样的，它使用UL的正常条件：s，这是换行符，这就是我所理解的。

等等，你是说你想要联系右边的社交者？然后在社交网站上使用float：right而不是联系一个。

编辑：尝试在li上使用margin-left或margin-right，比使用两个更好...

制作导航栏

1 个答案: