Question

我正在努力学习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查看我的输出。

我希望输出有一些变化，如：

显示的列表项位于黑匣子下方。我希望他们进入那个黑盒子里。

Answer 1

使用CSS position属性可以实现它。

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

ul.nav
{
list-style:none;
position:absolute;
top:28px;
right:0px;
}

DEMO

Answer 2

问题是您的菜单浮动在#header之外。解决方案是让#header知道其中有浮动项目。

您可以通过向其添加overflow: auto;来实现这一目标。

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

Updated Fiddle

Answer 3

点击此链接fiddle

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

Answer 4

提升链接的简单方法：

负边距：

#languageBar {
  margin-top: -30px;
}

或相对定位：

#languageBar {
  position: relative;
  top: -30px;
}

或者由于您将标题浮动到左侧，您可以将链接浮动到右侧：

#languageBar {
  float: right;
}

Answer 5

只需将#languageBar div浮动到右侧

即可

JSFiddle Demo

#languageBar {
    float: right;
}

在div中显示列表项而不使用负边距

5 个答案: