个人中心
gpt4 book ai didi

html -

转载 作者：行者123 更新时间：2023-11-28 08:09:06 26 4
gpt4 key购买 nike

更新:CSS 文件:http://pastebin.com/v9sQPzezHTML 文件:http://pastebin.com/pA9eMQnT

我的 <nav> 有问题css 中的元素。

我使用这个 css 创建了带有四个按钮的导航菜单，

nav{
    background: #000000;
    height: 120px;
    width:100%;
}


nav ul {
    margin: 0;
    padding: 10px 0px 0px 0px; 
    text-align: center;
}

nav li {
    display: inline-block;
}

nav a {
    display: inline-block;
    letter-spacing: 2px;
    padding: 20px 40px; 
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.80em;
    border: none;
    color: #000;
}

nav a:hover, nav .current a {
    text-decoration: none;
}

nav .current a {
    background: #008C9A;
}

问题是，当我调整窗口大小时，最右边的按钮消失了，而不是显示水平滚动条，如下图所示，

enter image description here

当我调整 chrome 窗口的大小时，

enter image description here

为什么我的浏览器不显示水平滚动条并从导航菜单中删除按钮？

最佳答案

你最好为 body 标签设置最小宽度，比如 

body{
    min-width: 720px; /* or what ever you want */
    ...
}

body {
    min-width: 720px;
	margin: 0px;
	padding: 0px;
	background: #fff;
	color: #363636;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: 300;
}


h1 {
	margin: 0;
	padding: 0;
}

p {
	line-height: 190%;
}


a {
	color: #171717;
}

a:hover {
	text-decoration: none;
}



/*********************************************************************************/
/* List Styles                                                                   */
/*********************************************************************************/

	ul.style1
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	ul.style1 li
	{
		border-top: solid 1px #E5E5E5;
		padding: 0.80em 0;
	}
	
	ul.style1 li:first-child
	{
		border-top: 0;
		padding-top: 0;
	}

	ul.style2
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	ul.style2 li
	{
		border-top: solid 1px #E5E5E5;
		padding: 0.80em 0;
	}
	
	ul.style2 li:first-child
	{
		border-top: 0;
		padding-top: 0;
	}



/*********************************************************************************/
/* Heading Titles                                                                */
/*********************************************************************************/


#container {
	width: 100%;
	/* setting the left/right width to auto will center the content */
	margin: 0px auto;
	background: #FFFFFF ;
	padding:10px 0px;
	}

#container h2 {
		text-transform: uppercase;
		letter-spacing: 0.20em;
		font-weight: 700;
		font-size: 2em;
		color: #00AABB;
	}
	




/* --------------------- 
   for Header area
--------------------- */

header
{
	background: #848484;
	text-align: center;
}


header h1{
		letter-spacing: 0.0em;
		text-transform: uppercase;
		font-size: 3em;
		padding: 1.1em 0;
	}

	
header a {
		text-decoration: none;
		color: #81BEF7;
	}
	
header a:visited {
		text-decoration: none;
		color: #81BEF7;
	}



nav{
	background: #00AABB;
	height: 90px;
	width:100%;
}


nav ul {
	margin: 0;
	padding: 35px 0px 0px 0px; /* top right bottom left */
	text-align: center;
}

nav li {
	display: inline-block;
}

nav a {
	display: inline-block;
	letter-spacing: 2px;
	padding: 20px 40px; /* top/bottom and right/left */
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.80em;
	border: none;
	color: #FFF;
}

nav a:hover, nav .current a {
	text-decoration: none;
}

nav .current a {
	background: #008C9A;
}

/** PAGE */





/*********************************************************************************/
/* footer                                                                     */
/*********************************************************************************/

footer{
	padding: 1em 0em;
	text-align: center;
	background: #424242;
	/*position:absolute;*/
    width:100%;
    bottom:0px;
	}
	
footer p{
	letter-spacing: 0.20em;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.80em;
	color: #6F6F6F;
	}
<!DOCTYPE html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Widget Standards</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link href="style.css" rel="stylesheet" type="text/css"/>
</head>

<body>


	<header>
		<h1><a href="index.html">Test</a></h1>
	</header>
		
	<nav>
		<ul>
			<li class="current"><a href="#">Introduction</a></li>
			<li><a href="#">Details</a></li>
			<li><a href="#">Register</a></li>
			<li><a href="#">About Me</a></li>
		</ul>
	</nav>
		
	<section id="container">
		<h2>Integer sit amet aliquet</h2>
		<p>This is <strong>Retention</strong>, a free, fully standards-compliant CSS template designed by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. The photos in this template are from <a href="http://fotogrph.com/"> Fotogrph</a>. This free template is released under the <a href="http://templated.co/license">Creative Commons Attribution</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :) </p>
		<p>Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. </p>
	</section>


		
	<footer>
		<p>&copy; Untitled. All rights reserved.</p>
	</footer>
	
</body>
</html>

关于html - <nav> 列表元素在我调整窗口大小时消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29363773/

26 4 0
文章推荐： ios - 点击另一个 UITextField 后自动禁用键盘
文章推荐： swift - 自动续订订阅免费试用无效
文章推荐： ios - 应用内购买错误，始终 myProduct 为 0
文章推荐： swift - UIViewController.topLayoutGuide 的用途是什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com