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

Question

I am trying to learn css. 我正在尝试学习CSS。

I have some html as follows: 我有一些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>

I have written some css as follows: 我写了一些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;*/
        }

My output: 我的输出：

You can see this jsFiddle to have a look at my output. 您可以看到此jsFiddle来查看我的输出。

I want to have some changes in output like: 我想对输出进行一些更改，例如：

the list-items shown are below the black box. 显示的列表项在黑框下方。 I want them to be inside that black box. 我希望他们在那个黑匣子里。

Answer 1

Using CSS position property you can achieve it. 使用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

The problem is that your menu floats outside #header . 问题在于您的菜单浮动在#header之外。 The solution is to let #header know that there are floated items inside it. 解决方法是让#header知道其中有浮动项。

You can make that happen by adding overflow: auto; 您可以通过添加overflow: auto;来实现这一点overflow: auto; to it. 对此。

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

Updated Fiddle . 更新小提琴 。

Answer 3

check this link fiddle 检查此链接小提琴

set padding instead of margin and use float: left 设置填充而不是空白，并使用float: left

Answer 4

Simple ways to move the links up: 向上移动链接的简单方法：

with negative margins: 边距为负：

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

or with relative positioning: 或相对位置：

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

or since you are floating the title to the left, you can float the links to the right: 或者由于您将标题浮动到左侧，因此可以将链接浮动到右侧：

#languageBar {
  float: right;
}

Answer 5

Simply float the #languageBar div to the right 只需将#languageBar div浮动到右侧

JSFiddle Demo JSFiddle演示

#languageBar {
    float: right;
}

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

问题描述

5 个解决方案

解决方案1
1 2014-08-21 11:30:06

解决方案2
1 2014-08-21 11:32:56

解决方案3
1 已采纳 2014-08-21 11:34:32

解决方案4
0 2014-08-21 11:36:14

解决方案5
0 2014-08-21 11:37:17

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

问题描述

5 个解决方案

解决方案1 1 2014-08-21 11:30:06

解决方案2 1 2014-08-21 11:32:56

解决方案3 1 已采纳 2014-08-21 11:34:32

解决方案4 0 2014-08-21 11:36:14

解决方案5 0 2014-08-21 11:37:17

解决方案1
1 2014-08-21 11:30:06

解决方案2
1 2014-08-21 11:32:56

解决方案3
1 已采纳 2014-08-21 11:34:32

解决方案4
0 2014-08-21 11:36:14

解决方案5
0 2014-08-21 11:37:17