Question

我创建了一个带有bootstrap的网站，导航菜单的li不是居中的。我尝试了内联块，内联li和文本对齐ul但我不知道我在哪里做错了。我试了好几个小时，仍然坚持中心。

问题是我希望我的导航集中，并且随着屏幕尺寸减小，ul的边距开始减小，只要它保持在徽标的中心并且始终与联系部分。

见截图

enter image description here

正如你所看到的，我已经给了ul一个固定的宽度，试图将li居中，但他们只是想带徽标，我不知道为什么。

ul（.nav）语法：

width: 440px;
text-align: center;

li语法：

display: inline;

＆＃13;

/* MY CSS */

body{
height:4000px;
padding-top:70px;
}
		
.navbar-header img{
float: left;
padding: 10px 10px;
line-height: 20px;
}

.contenta{
margin-top:100px;
}

.navigationary{
margin:40px auto 40px auto;
}

.separator{
  border: 1px solid #ffffff;
  height: 10px;
  margin: auto 20px auto 20px;
}

.nav{
  width: 440px;
  text-align: center; 	 	
display:inline-block;
}

.navbar-text{
float: right;
margin-top: 0px;
position:relative;
right: 5px;
}

.navbar-brand{
font-size: 21px;
}

.navbar-left{
margin: 0px 10px;
}

@media (max-width: 1053px){
.nav{
float: left;
padding: 0px;
}
}

＆＃13;

<!-- MY HTML -->
<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href=".\css\theme\bootstrap.min.css">
<link rel="stylesheet" type="text/css" href=".\css\custom\styles.css">
	
   </head>
<body>
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
		<div class="container-fluid navigationary">
		<!-- Logo -->
		<div class="navbar-header navbar-left">
			<a href="#"><img src="./images/server.png" alt="brand logo" width="50px" height="50px"></a>
			<a href="#" class="navbar-brand">HostKing</a>
		<!-- mobile hamburger navigation -->
		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hamburger-linker">
		<span class="sr-only">Navigation Toggle</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		
		</button>
		</div>
		<!-- Simple Link -->
		<div class="navbar-collapse" id="hamburger-linker">
		<div class="navbar-text">
			<p>Do you need help? Just Email, Live Chat or Call Us</p>
			<button>Live Chat</button>
			<span class="separator"></span>
			<span class="numbera">6284-6534</span>
			
		</div>
		<!-- Menu -->
		<ul class="nav navbar-nav container-fluid">
			<li><a href="#" class="active">HOME</a><span class="sr-only">Home page</span></li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">PRICING</a></li>
			<li><a href="#">DOMAIN</a></li>
			<li><a href="#">HOSTING</a></li>
             </ul>
		</ul>
		</div>
		</div>
		</nav>
		
	
		<div class="contenta">
		<div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum purus et volutpat semper. Aenean suscipit lectus ornare dictum tempor. Pellentesque mi purus, aliquet id eros id, lobortis pellentesque mauris. Nulla lectus velit, tempor sagittis velit in, maximus laoreet turpis. Maecenas aliquet lacus sed odio porta, at ornare arcu imperdiet. Vestibulum varius sem eu ante ultricies vehicula. Nam sit amet est tempor, volutpat elit elementum, venenatis nibh.</div>
		<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum purus et volutpat semper. Aenean suscipit lectus ornare dictum tempor. Pellentesque mi purus, aliquet id eros id, lobortis pellentesque mauris. Nulla lectus velit, tempor sagittis velit in, maximus laoreet turpis. Maecenas aliquet lacus sed odio porta, at ornare arcu imperdiet. Vestibulum varius sem eu ante ultricies vehicula. Nam sit amet est tempor, volutpat elit elementum, venenatis nibh.</p></div>
		<p>
		<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum purus et volutpat semper. Aenean suscipit lectus ornare dictum tempor. Pellentesque mi purus, aliquet id eros id, lobortis pellentesque mauris. Nulla lectus velit, tempor sagittis velit in, maximus laoreet turpis. Maecenas aliquet lacus sed odio porta, at ornare arcu imperdiet. Vestibulum varius sem eu ante ultricies vehicula. Nam sit amet est tempor, volutpat elit elementum, venenatis nibh.</p></div>
		<div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum purus et volutpat semper. Aenean suscipit lectus ornare dictum tempor. Pellentesque mi purus, aliquet id eros id, lobortis pellentesque mauris. Nulla lectus velit, tempor sagittis velit in, maximus laoreet turpis. Maecenas aliquet lacus sed odio porta, at ornare arcu imperdiet. Vestibulum varius sem eu ante ultricies vehicula. Nam sit amet est tempor, volutpat elit elementum, venenatis nibh.</p></div>
		</p>
		<div class="col-md-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum purus et volutpat semper. Aenean suscipit lectus ornare dictum tempor. Pellentesque mi purus, aliquet id eros id, lobortis pellentesque mauris. Nulla lectus velit, tempor sagittis velit in, maximus laoreet turpis. Maecenas aliquet lacus sed odio porta, at ornare arcu imperdiet. Vestibulum varius sem eu ante ultricies vehicula. Nam sit amet est tempor, volutpat elit elementum, venenatis nibh.</div>
		</div>
	<script type="text/javascript" src=".\js\jquery-2.1.3.min.js"></script>
<script type="text/javascript" src=".\js\bootstrap.min.js"></script>
</body>
</html>

＆＃13;

ul的li不是集中显示内联

0 个答案: