Html 仅限液体CSS的水平导航栏
我一直在遵循在线教程，仅使用CSS和HTML创建一个水平下拉菜单导航栏。教程进行得很顺利，但是我想让我的导航栏成为一个流体，这样它可以根据不同的浏览器大小进行调整，同时仍然保持水平导航栏 我听说这种流体CSS可以使用%和ems而不是固定宽度的像素来实现，但是我的尝试失败了。请任何人提供一些帮助，我可以如何实现这一点 以下是我的HTML代码：Html 仅限液体CSS的水平导航栏,html,css,Html,Css,我一直在遵循在线教程，仅使用CSS和HTML创建一个水平下拉菜单导航栏。教程进行得很顺利，但是我想让我的导航栏成为一个流体，这样它可以根据不同的浏览器大小进行调整，同时仍然保持水平导航栏 我听说这种流体CSS可以使用%和ems而不是固定宽度的像素来实现，但是我的尝试失败了。请任何人提供一些帮助，我可以如何实现这一点 以下是我的HTML代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Conte
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Casa Magnolia Home Page</title>
<link rel="stylesheet" type="text/css" href="css/homePage.css"/>
</head>
<body>
<div id="wrapper" align="center">
<div id="header" align ="left">
<?php
include "ImageFunctions.php";//include the PHP class
//create an object of the class so that its methods can be accessed
$myImageFunction = new ImageFunctions();
$logo = $myImageFunction->logo();
//$data= $myImageFunction->getData();
?>
</div>
<div id ="menuWrapper" align="left">
<div id ="navMenu" align="center">
<ul>
<li><a href="#">Home</a></li><!-- end Home link -->
<li><a href="#">The House</a>
<ul>
<li><a href="#">Info</a></li>
<li><a href="#">Map</a></li>
<li><a href="#">Slide Show</a></li>
</ul>
</li><!-- ends the House info list -->
<li><a href="#">The Area</a>
<ul>
<li><a href="#">Map</a></li>
<li><a href="#">Info about the area</a></li>
<li><a href="#">Sites and Attractions</a></li>
<li><a href="#">Web Address</a></li>
</ul>
</li><!-- ends The Area info list -->
<li><a href ="#">Terms and Conditions</a>
<ul>
<li><a href="#">Payments</a></li>
<li><a href="#">Cancellation</a></li>
<li><a href="#">Security Deposits</a></li>
<li><a href="#">Smoking Policy</a></li>
<li><a href="#">Pets Policy</a></li>
<li><a href="#">Insurance</a></li>
<li><a href="#">Swimming Pool</a></li>
<li><a href="#">Pest Control</a></li>
<li><a href="#">Complaints</a></li>
<li><a href="#">Arrival/Departure</a></li>
<li><a href="#">Codes of Conduct</a></li>
<li><a href="#">Limits of Liability</a></li>
</ul>
</li><!-- end of Terms and Conditions list -->
<li><a href ="#">Book With Us</a></li><!-- end of Book with us Link -->
<li><a href ="#">Help</a>
<ul>
<li><a href="#">Contact Us</a></li>
</ul>
</li><!-- end of Help list -->
</ul> <!-- end main UL -->
<br class="clearFloat" />
</div><!-- end navMenu div -->
</div> <!-- ends the menuWrapper div -->
</div>
</body>
我建议使用媒体查询来帮助您实现这一点，这样您就可以接近流体布局了谢谢您的提问 看看我做的小提琴--> 大的变化是： -删除“a”标记上的硬编码宽度 -将所有导航li的宽度设置为100% -为所有nav>ul>li（主要nav项目）提供16%的宽度（这仅覆盖主要nav项目的最后一点） -使所有nav ul宽度为100% 这不是一个完美的解决方案，但希望能有所帮助 保重
/*
Document : homePage
Created on : 16-Feb-2012, 17:00:56
Author : gerrard
Description:
Purpose of the stylesheet follows.
*/
@charset "utf-8";
#header
{
width: 100%;
height: 50px;
float: top;
background-color: beige;
margin:20px;
}
#menuWrapper
{
width: 100%;
height: 100%;
background-color: yellow;
margin: 10px;
}
#navMenu
{
width:100%;
height:100%;
float: center;
margin: 0;
padding: 0;
}
#navMenu ul
{
margin: 0;
padding: 0;
line-height: 30px;
}
#navMenu li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: orchid;
}
#navMenu ul li a
{
text-align: center;
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 40%;
width: 230px;
display: block;
color: yellow;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul
{
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul
{
visibility: visible;
}
/********************************************************************************/
#navMenu li:hover
{
background: visible;
}
#navMenu ul li:hover ul li a:hover
{
background: violet;
color: silver;
}
#navMenu a:hover
{
color: peachpuff;
}
.clearFloat
{
clear: both;
margin: 0;
padding: 0;
}
#navMenu > ul > li {
width:16%;
}