gpt4 book ai didi

html - 在不使用负边距的情况下在 div 中显示列表项

转载 作者:太空宇宙 更新时间:2023-11-03 23:30:44 25 4
gpt4 key购买 nike

我正在努力学习 CSS。

我有一些html如下:

<body>

<div id="header">
<span id="websiteName">
VISHAL
</span>

<div id="languageBar">
<ul class="nav">
<li><a href="#">English</a></li>
<li><a href="#">Hindi</a></li>
<li><a href="#">Marathi</a></li>
<li><a href="#">Gujarati</a></li>
</ul>
</div>

</div>

</body>

我写了一些css如下:

* 
{
margin: 0px auto;
padding: 0px;
}

div#header
{
background: #353535;
box-shadow: 0px 5px 5px #808080;
}

div#header > span#websiteName
{
font-family: TEMPUS SANS ITC;
font-size: 44px;
font-weight:bold;
color: #0094ff;
margin-left:18%;
}

ul.nav
{
list-style:none;
}
ul.nav li
{
width:100px;
float:right;
display:inline;
}

ul.nav li a
{
display:block;
width:100px;
/*height:31px;*/
float:left;
/*margin-top:150px;*/
/*text-decoration:none;*/
/*color:black;*/
}

我的输出:

可以看到this jsFiddle看看我的输出。

我想对输出进行一些更改,例如:

显示的列表项在黑框下方。我希望它们在那个黑盒子里。

最佳答案

检查此链接 fiddle

设置填充而不是边距并使用float: left

关于html - 在不使用负边距的情况下在 div 中显示列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25425126/

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