Question

我正在尝试为我正在处理的网站模板创建导航菜单。我想在左边放置品牌名称，在右边放置社交媒体字体真棒图标，但是我的品牌名称缩进，而右边的图标是它们应该在的位置。我怎么做他们甚至??

HTML

<!DOCTYPE html>
<html lang="en">
<head>

<title>Assignment</title>
<!--Bootstrap For Cleaner Viewability-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina|PT+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="minimal.css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
</head>

<body>

<div class="container">
<div align="center">

<ul id="nav">

<a href="#" id="home">MINIMAL</a> <!--This is the one-->

<a href="#"><li>Home</li></a>
<a href="#"><li>Shop</li></a>
<a href="#"><li>Contact</li></a>
<a href="#"><li>Shop Men</li></a>
<a href="#"><li>Shop Women</li></a>

<a href="#" id="test">MINIMAL</a>

</ul>
</div>
</div>

CSS：

#home {
float: left;
padding-top: 15px;
font-size: 30px;
font-family: 'PT Sans', sans-serif;
color: #545456;
text-decoration: none;
}

#test  {
float: right;
padding-top: 15px;
font-size: 30px;`enter code here`
font-family: 'PT Sans', sans-serif;
color: #545456;
text-decoration: none;
}

Answer 1

使用li作为这样的菜单项： fiddle

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Answer 2

首先，li元素应该包裹链接。

要在左侧和右侧获得一个，您可以像这样浮动：

#home, #test {
  padding-top: 15px;
  font-size: 30px;
  font-family: 'PT Sans', sans-serif;
  color: #545456;
  text-decoration: none;
}

#nav {
  list-style: none;
  padding: 0;
}
#nav li {
  display: inline-block;
  padding: 5px;
}

#nav li:first-child {
  float: left;
}

#nav li:last-child {
  float: right;
}

<div class="container">
<div align="center">

<ul id="nav">

<li><a href="#" id="home">MINIMAL</a></li> <!--This is the one-->

<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Shop Men</a></li>
<li><a href="#">Shop Women</a></li>

<li><a href="#" id="test">MINIMAL</a></li>

</ul>
</div>
</div>

或者你可以使用flexbox

#home, #test {
  padding-top: 15px;
  font-size: 30px;
  font-family: 'PT Sans', sans-serif;
  color: #545456;
  text-decoration: none;
}

#nav {
  list-style: none;
  padding: 0;
  display: flex;
}
#nav li {
  display: inline-block;
  padding: 5px;
}

#nav li:first-child {
  margin-right: auto;
}

#nav li:last-child {
  margin-left: auto;
}

<div class="container">
<div align="center">

<ul id="nav">

<li><a href="#" id="home">MINIMAL</a></li> <!--This is the one-->

<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Shop Men</a></li>
<li><a href="#">Shop Women</a></li>

<li><a href="#" id="test">MINIMAL</a></li>

</ul>
</div>
</div>

对齐导航菜单

2 个答案: