html - 如何让所有列表项的宽度相等？-6ren

html - 如何让所有列表项的宽度相等？

转载作者：太空宇宙更新时间：2023-11-03 20:48:52

25

4

我希望每个 ul 元素的导航栏宽度相等。我已经为 ul.navbar a 和 ul.navbar li 尝试了 Width:100%。 JSfiddle:http://jsfiddle.net/HeyItsProdigy/a2zVr/

CSS:

@charset "utf-8";
/* Elements */

body {
    margin:0;
    padding:0;
    background-image:url(main%20bg.jpg)
}

ul {
    padding:0;
    margin:0;
}

/* End of elements */




/* Id's */

#container {
    margin-left:auto;
    margin-right:auto;
    width:1000px;
}

#body {
    border:5px solid #CF0;
    width:1000px;
    height:1000px;
    background-image:url(middle%20bg.png);
}

#navbar {
    position:relative;
    top:12px;
    text-align:center
}

/* End of is's */




/* Classes */

.navbar {
    list-style:none;
}

ul.navbar li {
    display:inline;
    margin:0;
    padding:0px;
    text-align:center;
}

ul.navbar a {
    background-color:#00CCFF;
    padding:10px;
    margin:0px;
    text-decoration:none;
    color:#CF0;
    border-radius:100px;
    border:2px solid white;
}

ul.navbar a:hover {
    background-color:#00FFFF;
    padding:10px;
    margin:0px;
}

/* End of classes */

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="style.css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>

<script>
<!--



//-->
</script>

</head>

<body>
<div id="container">
    <div id="body">
        <div id="navbar">
            <ul class="navbar">
                <li><a href="index.html">Blog</a></li><li><a href="index.html">Photos</a></li><li><a href="index.html">Home</a></li><li><a href="index.html">Videos</a></li><li><a href="index.html">About</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

最佳答案

设置内部 anchor 为

ul.navbar a {
    display: inline-block;
    width: 80px;
}

为您的内容设置足够长的宽度。

http://jsfiddle.net/vrFx7/1/

关于html - 如何让所有列表项的宽度相等？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18103974/

25

4

0

文章推荐： c# - 使用 Async Await 是否可以避免线程耗尽？

文章推荐： python - 构造字典时如何使用变量的值作为键

文章推荐： opencv - IplImage 像素访问 JavaCV

文章推荐： c# - 在 C# 中获取对类中某个类型的所有对象的引用

java - 为什么自动装箱的整数和 .getClass() 值 == 相等，而不仅仅是 .equals() 相等？
也许我在 Java 上工作的时间太长而没有真正理解它的一些基础知识。我确实理解 == 用于对象引用相等，而 .equals() 用于对象值相等。比较整数: Integer x = 1, y = 1
javascript - boolean 相等
我是从一道考试题中得出这个答案的，但无法理解该解决方案的工作原理。如果值“x”和“y”相等，则此函数应该返回“true”，否则返回 False。解决方法: function equal_boolea
Mysql utf8mb4 相等
我将带有表情符号的文本存储在 mysql 数据库中。数据库、表和列设置为使用utf8mb4和utf8mb4_unicode_ci。我可以毫无问题地输入单元格值(数据类型是 VARCHAR)。但是
PHP DateTime 相等
如果两个 DateTime 对象具有相同的日、月和年，我该如何比较？问题是他们有不同的小时/分钟/秒。最佳答案对于 DateTime 对象，没有好的方法可以做到这一点。所以你必须做，比方说，不是那
c# - GetHashCode 相等
我一直想知道这个问题，所以我想我会问的。您将看到的大多数地方都使用相同的语义逻辑来覆盖 Equals 和 GetHashCode 以实现成员平等...但是它们通常使用不同的实现: publi
comparison - CoreGraphics 中的浮点比较(相等)
苹果 CoreGraphics.framework , CGGeometry.h : CG_INLINE bool __CGSizeEqualToSize(CGSize size1, CGSize s
python - 由于最新的python版本保留了dict的插入顺序，相等(==)的含义会改变吗？
在最新的python 版本中， dict 保留了插入的顺序。在平等方面是否有任何变化。例如，目前以下工作。既然广告顺序很重要， future 会不会发生这种变化？我问是因为有根本性的变化 - 以前
django 过滤器两个 ManyToManyField 相等
class VideoUserModel(models.Model): user = models.ManyToManyField(get_user_model()) viewlist
coq - 枚举类型的 COQ 相等
我在 COQ 中有一个有限枚举类型(比如 T)，我想检查元素是否相等。这意味着，我需要一个函数 bool beq_T(x:T,y:T) 我设法定义这样一个函数的唯一方法是逐个分析。这会导致很多匹配语
fortran - 测试 float 相等
我在 Windows 7(32 位)下的 MinGW 中使用 gfortran 来编译 Fortran 代码。这是文件 testequal.f 中包含的最少代码: program test
java - jsp。枚举比较/相等
我有以下 jsp 片段: ${campaign.moderated}
python - 如何测试两个稀疏数组是否(几乎)相等？
我想检查两个稀疏数组是否(几乎)相等。而对于 numpy 数组，你可以这样做: import numpy as np a = np.ones(200) np.testing.assert_array_
c# - 自定义对象的值是否与 List<> 相等
我有以下类(class): public class MyDocuments { public DateTime registeredDate; public
c - for循环中两个 float 相等
这个问题已经有答案了: Is floating point math broken? (33 个回答) 已关闭 5 年前。我在这里想做的是，我采用一个精度值(小于 1)并打印 1/n 类型的所有数字
C 检查字符串的最后一个字符是否与 X 相等
我正在为我的arduino写一个草图，我想检查我的字符串的最后一个字符。例如: 如果输入是 cats- 我想看看最后一个字符(在我的例子中是“-”)实际上是否 - 我使用的代码: 串行事件函数 vo
c# - RuntimeMethodInfo 相等 : bug?
让我们开始: using System; public class Program { class A { public virtual void Do() { }
java - 仅根据某些键将两个 HashMap 相等
我只需要根据几个键(不是全部)来确定两个 HashMap 的相等性除了单独访问每个字段并比较相等性之外，还有其他节省时间的方法吗？最佳答案我能想到的一种方法是在您的 HashMap 上存储某种“
java - 测试是否与 double 相等
在Java中，大写的Double可以为null。但是如果我有 double a 和 b 并且我这样做: if (a.equals(b)) 如果其中之一为空，它会崩溃。有没有更好的方法来比较它们？最
mysql - 使用选择选项从另一个数据库插入并且两个数据库表 ID 相等
我正在尝试从我的旧数据库中插入表格数据。 Id 在数据库表和选择特定列中都相等。这是我的数据库。旧数据库:sch -> 旧表:product (id, tag, url) (13, red, aaa
css - 在容器内拆分两个 div 相等
我正在开发一个应用程序，它在我的主视图中有一个侧边栏和两个 div。我试图在容器内平均分割两者的高度。我试过 height = 50% 但效果不太好。

首页

博学

6Ren·AI

商城

html - 如何让所有列表项的宽度相等？