css - 如何使用百分比均匀地分隔导航栏元素？-6ren

css - 如何使用百分比均匀地分隔导航栏元素？

转载作者：行者123 更新时间：2023-11-28 12:43:36

25

4

嘿，这是我的第一个网站，我正在尝试制作一个导航栏，其中包含均匀分布的列表项和下拉框。我已经想出了如何制作下拉框，但是在这个过程中我现在无法将我的元素均匀地分布在 nag 栏上。

如有任何帮助，我们将不胜感激。

CSS:

body {
background-image: url('paper.png');
background-repeat: repeat;
z-index: -1;
}

h1 {
    font-size: 32px;
    text-decoration: none;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 19px;
}

h4 {
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    color: #E24000;
    padding: 0px 0px 0px 1%;
    text-shadow: 0.5px 0.5px 1px #333333;
    font-weight: normal;
}

h5 {
    font-size: 13px;
}

h6 {
    font-size: 11px;
}

p {
    font-size: 11px;
    font-family: Tahoma, Geneva, sans-serif;
    padding: 0px 0px 0px 1%;
}

#logo {
    padding-top: 5%;
    padding-bottom: 2.5%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 18%;
    width: 18%;
}

#top_image {
background-image: url('family.jpg');
background-size: 100%;
background-repeat: no-repeat;
}

#nav {
    background-color: #A1C6E5;
}

#nav_wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 1% 1% 1% 1%;
    font-size: 20px;
    font-family: Tahoma, Geneva, sans-serif;
    text-align: justify;
    text-shadow: 1px 1px 2px #333333;
    background-color: #A1C6E5;
}

#nav ul{
    list-style-type: none;
    height: auto;
    padding-top: 1%;
    padding-bottom: 1%;
    margin: 0px;
    position: relative;
    display: block;
    text-align: center;
}


#nav ul li{
    display: inline-block;
    text-align: center;
}

#nav ul li:hover{

}

#nav ul li a,visited{
    color: #FFFFFF;
    display: block;
    padding: 5%;
    text-decoration: none;
}

#nav ul li a:hover {
    color: #E24000;
    text-decoration: none;
}

#nav ul li:hover ul{
    display: block;
}

#nav ul ul{
    display: none;
    position: absolute;
    background-color: #A1C6E5;
}

#nav ul ul li{
    display: block;
}

#nav ul ul li a,visited{
    color #CCC;
}

#nav ul ul li a:hover{
    color: #E24000;;
}

HTML:

<!DOCTYPE html>

<html>

<head>
    <title>Vitalita</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
        <header id="top_image">
            <a href="Home.html"><img id="logo" src="logo.png" alt="Vitalita"></a></br>
        </header>

        <nav id="nav">

        <nav id="nav_wrapper">

            <ul>
                <li><a href="About.html">About</a>
                    <ul>
                        <li><a href="Contactus.html">Contact Us</a></li>
                        <li><a href="Feedbackform.html">Feedback</a></li>
                        <li><a href="Helpdesk.html">Helpdesk and FAQ</a></li>
                        <li><a href="Privacy.html">Privacy Policy</a></li>
                    </ul>
                </li>
                <li><a href="Health.html">Health</a></li>
                <li><a href="Media.html">Media</a></li>
                <li><a href="Tools.html">Tools</a></li>
                <li><a href="Forum.html">Forum</a></li>
                <li><a href="Account.html">Account</a></li>
            </ul>

        </nav>

        </nav>
        </br>
        <section>
            <article>
                <header>
                    <br><h4>Featured article: Best time of the day to exercise</h4><br>
                </header>
                        <p> The best time of day to exercise is long disputed. In the morning? You'll be worn out for the rest of the day. Before a meal? You won't have enough energy to push yourself. After eating? The food will weigh you down! Before bed? The endorphins will keep you up. We'll take to through the pros and cons of each time.</p>
            </article>
        </section>
            <aside>
                    <br><h4>Tip of the day!</h4><br>
                        <p>Clouds don't block all UV rays. Wear sunscreen, even in bad weather!</p>
            </aside>
        <section>
            <header>
                    <br><h4>About us</h4><br>
            </header>
                        <p>We are a group of uni students dedicated to making the world a healthier place, starting with our own friends. We try our best to make Vitalita a fun, supportive environment that fosters healthy lifestyles, and is a source for reputable information on obesity. We hope you enjoy yourself here.</p>
        </section>
        <section>
            <header>
                <br><h4>Contact Us</h4><br>
            </header>
                    <p>Email: vitalita@gmail.com<br>School of IT<br>The University of Sydney<br>Australia<br>Or by this online form!</p>
        </section>
        <footer>
            <p>Copyright Vitalita 2014</p>
        </footer>
</body>

<html>

我还有其他页面，但我认为它们与解决方案无关。

再次感谢所有能够帮助我的人。

干杯，

约书亚

最佳答案

如果古老的浏览器支持不是问题，您可以使用 css3 flexbox :

#nav ul {
  display: flex;
  justify-content:space-around;
  list-style-type: none;
  height: auto;
  padding-top: 1%;
  padding-bottom: 1%;
  margin: 0px;
  position: relative;
  text-align: center;
}

Demo

关于css - 如何使用百分比均匀地分隔导航栏元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25809059/

25

4

0

文章推荐： swift - 无法将 int 类型的值转换为预期参数类型 'CGfloat'

文章推荐： ios - 自定义 iOS 应用启动画面

language-agnostic - 百分比、百分比、分数、比例因子的术语？
我的函数概念上都返回相同的东西，但结果可以采用不同的形式: function GetThingy() 有四个不同的函数，每个可以返回不同的东西: 0.071(代表增长 7.1% 的 float 值)
Java 百分比
这个问题在这里已经有了答案: Int division: Why is the result of 1/3 == 0? (19 个回答) 关闭 4 年前。有什么方法可以计算(例如)120 的 50
范围格式中每个单元格的 VBA 百分比
我四处寻找这个，它看起来很简单，但我无法让它工作。我有一张表格，其中一列需要格式化为百分比。下面是我的代码，但它没有格式化单元格，它只是将它们保留为小数。我想这是因为 cell ，即使声明为范围，
WPF - margin 百分比
我刚刚开始使用 WPF。从那以后，我开始关注造型系统。我来自 CSS 背景，我想以百分比设置边距。当前值以像素为单位
真实列的 SQL 百分比
我有一个表，其中每一行都有一个描述字段和一个 bool 值。我正在尝试编写一个查询，我可以在其中按每个相应的描述进行分组，并查看 bool 值为真的次数百分比。示例表: PID Gen
caching - OrientDB中的磁盘缓存如何按读缓存和写缓存分开(百分比)
我从文档中发现，考虑到 orientdb 100% 使用磁盘缓存，它使用的最大大小为 70% 用于读取缓存，30% 用于写入缓存 ( http://orientdb.com/docs/last/plo
Docker CPU 百分比
有什么方法可以获取 docker 容器内部而不是外部的 cpu 百分比吗？! docker stats DOCKER_ID 显示的百分比正是我需要的，但我需要它作为变量。我需要获取容器本身内部的 cp
r - 计算数据集每列的比例(百分比)
我正在尝试计算数据集每列中类别的比例(百分比)。示例数据: df <- data.frame( "Size" = c("Y","N","N","Y","Y"), "Type" =
SQL:你用什么在数据库中存储比率(百分比)？
我应该使用小数还是 float 在数据库中存储比率？特别是在 SQL2005 中。最佳答案这取决于您对准确性的需求。如果您可以容忍来自存储 float 的 IEEE 方法的典型错误，则使用 flo
Lua:随机:百分比
我正在创建一个游戏，目前必须处理一些math.random问题。我的Lua能力不是那么强，你觉得怎么样您能制定一个使用 math.random 和给定百分比的算法吗？我的意思是这样的函数: fu
动态计算的 SQL 百分比
如何在SQL中动态计算百分比？假设您有一个名为 Classes 的下表: ClassSession StudentName -------------------------------
javascript - 掩码输入数字 - 百分比
如何通过 jQuery 创建具有百分比的数字掩码输入？我是否让输入仅接受三个数字，并在用户完成输入时在数字后添加百分号(keyup)？我不使用插件。示例:1% 或 30% 或 99% 或 100%
Python-删除字典对的比例/百分比
我正在尝试构建一个工具，可以突出显示具有最高介数中心性的社交网络节点。我将所有网络节点的测量值计算到字典中，按顺序对字典进行排序，然后仅保留前 3 对。我希望这个工具是可扩展的，所以我想保留前 10
mysql - 同列计算/百分比
MYSQL 中的人员如何将一个日期条目和分数的用户百分比与另一个日期条目和分数进行比较，从而有效地返回从一个日期到另一个日期的用户百分比增加情况？几天来我一直在试图解决这个问题，但我已经没有想法了，
mysql - SQL - 百分比
我需要进行查询，结果是百分比。我现在的查询如下所示: select COUNT(CREATE_WEEKDAY), CREATE_WEEKDAY, COUNT(CREATE
javascript - AJAX图片上传时生成加载条/百分比
我有一个图像上传功能，其工作原理如下: $('.update-insertimage-form').submit(function() { $(".submit-newupdate-btn").add
Html - 容器中的图像高度(百分比)
我的问题很简单，但我仍然找不到这个问题的答案... 假设我们有两个包含图像的容器。我们有类似的东西 #containera { width: 50%; height: 50%; backgr
其他元素的 CSS 百分比
是否可以将 CSS 尺寸指定为除其父元素之外的另一个元素的百分比？例如，我想将 div 的 border-radius 指定为 div 宽度的 10%。但是，border-radius: 10% 在
html - 输入和提交按钮的大小(百分比)
我正在尝试设置按钮的大小并以百分比进行编辑但是这个的线性大小是不同的。为什么？最佳答案您好，问题出在属性 box-sizing 上.默认为 input type
html - 如何将数据可见范围更改为 % 百分比
我将它用于我的页眉，该页眉在一页上下滚动页面中发生变化。我注意到它没有响应，所以我想问你是否知道一种使它响应的方法。就像将 0-690 更改为百分比，以便它可以在移动设备和电视屏幕上使用。 HTML

首页

博学

6Ren·AI

商城

css - 如何使用百分比均匀地分隔导航栏元素？