Question

只是玩html5和css，我迷上了试图提供全宽度菜单。

我花了好几个小时试图找出问题所处的位置，但无法让它发挥作用。

我需要你的帮助。

这是我的html5和css代码：

＆＃13;

* {
	margin: 0;
	padding: 0;
	font-size: 15px;
}
header{
	
}
.nav {
	display: inline-block;
	position: relative;
	font-weight: 900
	width: 100%;
	background:#34495E;
	text-align: center;
}

.nav-list {

}

.nav-item {
	text-align: center;
	display: inline-block;
	width: 100px;
}

.nav-item a {
  display:block;
  padding:20px 20px;
  color:#FFF;
  width: 100%; 
}

ul li.selected {
	background: #fff;
}

ul li.selected a {
	color: #384047;
}

.nav-item a:hover {
  background: tomato;

}

@media only screen and (min-width: 320px) and (max-width: 768px) {
  .nav {
    width:100%;
  }
  .nav-item {
    width:100%;
    float:none;
  }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
	<title>This is the index</title>
	<link rel="stylesheet" href="css/styles.css" />
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">  
	<!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
</head>
<body>

	<header>
		<!--<div id="logo" class="">
        	<h1>XYZ</h1>
        </div>	-->
		<nav class="nav">   
			<ul class="nav-list">
				<li class="nav-item"><a href="#">Home</a></li>
				<li class="nav-item"><a href="#">About</a></li>
				<li class="nav-item"><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>

	<article>
				
	</article>

	<footer>
		Copyright | XYZ | 2016.
	</footer>
	<script src="js/jquery.js"></script>	
</body>
</html>

＆＃13;

Answer 1

＆＃13;

* {
	margin: 0;
	padding: 0;
	font-size: 15px;
}
header{
	
}
.nav {
	display: inline-block;
	position: relative;
	font-weight: 900;
	width: 100%;
	background:#34495E;
	text-align: center;
}

.nav-list {

}

.nav-item {
	text-align: center;
	display: inline-block;
	width: 100px;
}

.nav-item a {
  display:block;
  padding:20px 20px;
  color:#FFF;
  width: 100%; 
}

ul li.selected {
	background: #fff;
}

ul li.selected a {
	color: #384047;
}

.nav-item a:hover {
  background: tomato;

}

@media only screen and (min-width: 320px) and (max-width: 768px) {
  .nav {
    width:100%;
  }
  .nav-item {
    width:100%;
    float:none;
  }
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
	<title>This is the index</title>
	<link rel="stylesheet" href="css/styles.css" />
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">  
	<!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
</head>
<body>

	<header>
		<!--<div id="logo" class="">
        	<h1>XYZ</h1>
        </div>	-->
		<nav class="nav">   
			<ul class="nav-list">
				<li class="nav-item"><a href="#">Home</a></li>
				<li class="nav-item"><a href="#">About</a></li>
				<li class="nav-item"><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>

	<article>
				
	</article>

	<footer>
		Copyright | XYZ | 2016.
	</footer>
	<script src="js/jquery.js"></script>	
</body>
</html>

＆＃13;

这里有效。你只错过了一个分号（;）

Answer 2

* {
    margin: 0;
    padding: 0;
    font-size: 15px;
}
header{
    width:100%;
}
.nav {
    display: inline-block;
    position: relative;
    font-weight: 900;
    width: 100%;
    background:#34495E;
    text-align: center;
}

.nav-list {

}

.nav-item {
    text-align: center;
    display: inline-block;
    width: 100px;
}

.nav-item a {
  display:block;
  padding:20px 20px;
  color:#FFF;
  width: 100%; 
}

ul li.selected {
    background: #fff;
}

ul li.selected a {
    color: #384047;
}

.nav-item a:hover {
  background: tomato;

}

@media only screen and (min-width: 320px) and (max-width: 768px) {
  .nav {
    width:100%;
  }
  .nav-item {
    width:100%;
    float:none;
  }
}

您没有使用font-weight:900

关闭;

https://jsfiddle.net/uxrfxwd7/

如何在html5中将菜单的宽度拉伸到全宽

2 个答案: