Question

如何在＆＃34;菜单中制作李？＃34; div是水平的，如果它大于＆＃34;菜单＆＃34;然后我怎么能向左或向右滑动？

现在这是 HTML `

<div id="menu">
    <ul style="text-align: center; background-color: #003366; display: inline ; position: center; list-style-type: none;">
        <li onClick="location.href = ''">how has the Internet impacted teens?</li>
        <li onClick="location.href = ''">how has the Internet impacted teens?</li>
        <li onClick="location.href = ''">how has the Internet impacted teens?</li>
        <li onClick="location.href = ''">how has the Internet impacted teens?</li>
        <li onClick="location.href = ''">how has the Internet impacted teens?</li>
    </ul>
</div>
 <h1 id="panel11">In what way has the Internet impacted teens?</h1>

<div id="person">......................</div>
<div id="person1">......................</div>
<div id="person2">......................</div>
<div id="person3">......................</div>
<div id="person4">......................</div>
<div id="person5">......................</div>
<div id="person6">......................</div>
<div id="person7">......................</div>
<div id="person8">......................</div>
<div id="person9">......................</div>

现在这里是 CSS

#menu {
    margin-top:60px;
    margin-left:500px;
    text-align:center;
    overflow: auto;
    text-align: center;
    background-color: #003366;
    display: inline-block;
    width: 400px;
    height: 50px;
    position: center;
    list-style-type: none;
}
body {
    background-color: green;
    margin: auto;
}
h1 {
    background-color: #FF0D0D;
    position:fixed;
    top:0;
    width:100%;
    z-index:99;
    text-align:center;
    margin-top: 0px;
}
#person {
    float:left;
    clear:right;
    background-color: orange;
    margin-top:100px;
}
#person1 {
    float:right;
    clear:left;
    background-color: orange;
}
#person2 {
    float:left;
    clear:right;
    background-color: orange;
}

对于＆＃34;其他人来说，它是一样的。 div的。我已经浏览了互联网，我找到了一个，但我不记得我找到它的网站。

Answer 1

在li元素上留下浮动，你必须设置一个固定大小，所以所有li都得到他们需要的宽度。如果屏幕小于ul。

Answer 2

工作演示：http://jsfiddle.net/Fwm6H/

HTML：

<div class="person_container">
    <div id="person" class="persons">Hi</div>
    <div id="person1" class="persons">Hi</div>
    <div id="person2" class="persons">Hi</div>
    <div id="person3" class="persons">Hi</div>
    <div id="person4" class="persons">Hi</div>
    <div id="person5" class="persons">Hi</div>
    <div id="person6" class="persons">Hi</div>
    <div id="person7" class="persons">Hi</div>
    <div id="person8" class="persons">Hi</div>
    <div id="person9" class="persons">Hi</div>
</div>

CSS：

.person_container{
    width:100%;
    white-space:nowrap;
    overflow:auto;
    border:1px solid #000;
    font-size:0;
}
.persons{
    display:inline-block;
    background:#dadada;
    width:50px;
    height:50px;
    border:1px solid #aaa;
    font-size:14px;
}

Answer 3

要使li元素显示在一行中，您必须向其添加display:inline属性，并将white-space:nowrap属性添加到其父ul或{{ 1}}，所以该行不会被破坏。

如果您希望在窗口/屏幕比菜单更窄的情况下自动显示水平滚动条，则必须使用应用于父#menu div或祖先{{overflow:auto的{{1}}属性。 1}}

我还清理了ul CSS：#menu div无效，#menu div两次等等。

无论如何，建议将CSS放在一起，因此请尽量避免在HTML标记中使用position:center属性。

这是CSS：

text-align:center

在此处查看：http://jsfiddle.net/LbA7Q/3/

怎么能让div里面的li水平？

3 个答案: