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

我正在努力学习 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/