个人中心
gpt4 book ai didi

html - Liquid CSS 仅水平导航栏

转载 作者：太空宇宙 更新时间：2023-11-04 16:03:42 25 4
gpt4 key购买 nike

我一直在按照在线教程仅使用 CSS 和 HTML 创建水平下拉菜单导航栏。教程进展顺利，但我想让我的导航栏流畅，以便它适应不同的浏览器大小，同时仍然保持水平导航栏。

我听说这种流畅的 CSS 可以使用 % 和 ems 而不是固定宽度的像素来实现，但是我尝试实现它的尝试失败了。请任何人提供一些关于如何实现这种流畅的 CSS 的帮助。

这是我的 HTML 代码:

<!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>

这是我的 CSS 代码:

/* 
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;
}

最佳答案

感谢提问。

看看我制作的这个 Fiddle --> http://jsfiddle.net/HerrLoop/FxNsj/

最大的变化是:

-删除“a”标签上的硬编码宽度

-将所有导航栏的宽度设置为 100%

-给所有 nav > ul > li(主要导航项)16% 的宽度(这仅覆盖主要导航项的最后一个点)

#navMenu > ul > li {
width:16%;
}

-给所有 nav ul 宽度 100%

这不是一个完美的解决方案，但希望它能有所帮助。

保重。

关于html - Liquid CSS 仅水平导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9457751/

25 4 0
文章推荐： javascript - 如何将正文的滚动条用于文本区域
文章推荐： javascript - 到达 div 时更改 css 类和 jquery 函数
文章推荐： javascript - 如何停止/暂停/覆盖Dojo的confirmDialog隐藏执行？
文章推荐： html - Jade/Pug 模板引擎中不允许属性(单击)？