gpt4 book ai didi

html - DIV 中的元素开始一个新行

转载 作者:太空狗 更新时间:2023-10-29 15:23:33 27 4
gpt4 key购买 nike

我在 HTML/CSS 问题上需要您的帮助:我正在创建一个非常简单的网页,其中有一个导航栏,该导航栏由包含五个“li”的“ul”组成。 “ul”是 900px 宽,它在一个“div”中。每个“li”的宽度为 900/5 = 180px。尽管如此,这些元素还是创建了一个新行。

这是我期望的(或多或少): enter image description here

这是我得到的: enter image description here

这是HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My First Website</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
</head>

<body>
<div id="container">
<div id="fascia">
<h1>My First Website</h1>
</div>
<hr class="menu">
<div id="nav">
<ul>
<li><a href="img/a.jpg">About</a></li>
<li><a href="img/b.jpg">Photo</a></li>
<li><a href="img/c.jpg">News</a></li>
<li><a href="img/d.jpg">Video</a></li>
<li><a href="img/e.jpg">Contacts</a></li>
</ul>
</div>
<hr class="menu">
</div>

</body>
</html>

这是我的第一个 CSS 文件(重置标准 CSS 文件):

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

这是我的真正的 CSS 文件:

@charset "utf-8";
/* CSS Document */


body
{
background-color:#363636;
background-image:url(../img/noise.png);
height:100%;
width:100%;
margin:0;
padding:0;
}
#container
{
position:relative;
width:1000px;
height:700px;
margin:0 auto;
}

#fascia
{
width:950px;
padding:25px;
font-size:4em;
position:relative;

}

html
{
height:100%;
}

h1,h2,h3,h4,h5,h6,p{
color:#FFF;
font-family:Arial,Helvetica,sans-serif;
text-align:center;
}

hr.menu
{
margin:0;
}

#nav
{
width:100%;
position:relative;
}

#nav ul
{
width:900px;
margin:0 auto;
}

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


#nav ul li a
{
display:block;
width:180px;
font-weight:bold;
color:#FFF;
text-transform:uppercase;
text-align:center;
text-decoration:none;
padding:5px 0;
}


#nav ul li a:hover
{
background-color:#C09;
}

对于此消息的长度,我们深表歉意,感谢您的任何答复!

编辑:这里是 jsFiddle

最佳答案

内联元素对其在 HTML 中的结构敏感 - 如果您注释掉 <li> 之间的空格的或手动删除菜单将按预期排列的空白区域。

另一种选择是设置 font-size<ul> 上为 0,然后重新声明 <li> 所需的字体大小的。 Here是一篇内容丰富的文章,讨论了这个热门问题以及解决它的其他方法。

关于html - DIV 中的元素开始一个新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15368554/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com