代码之家 › 专栏 › 技术社区 › BrunoLM

如何将无限数量的元素放在同一行上?

css html

BrunoLM · 技术社区 · 14 年前

我有菜单:

<ul>
<li>选项卡01</li>
<li>选项卡02</li>
<li>选项卡03</li>
<li>选项卡04</li>
&L/UL & GT;
< /代码> 

我想放尽可能多的标签,我想保持它们在同一行。我想创建一个控件来滑动选项卡:

右箭头单击

左箭头单击

我必须在CSS上做什么才能获得这种行为?同一行上的所有元素,不考虑元素的数目…。

an example of my problem on jsfiddle


   
    
     
      我想放尽可能多的标签,我想保持它们在同一行。我想创建一个控件来滑动选项卡:
     
     
      
      右箭头单击
     
     
      
      单击左箭头
     
     
      我必须在CSS上做什么才能获得这种行为?同一行上的所有元素,无论元素的数目如何…
     
     
      
       
        An example of my problem on jsFiddle

5 回复 | 直到 9 年前

wilsonpage 14 年前

我知道你在做什么,如果你漂浮在你的李船上,你会发现它们被集装箱包裹着,然后溅到下一行。要解决此问题,需要使用以下代码:

#container{
overflow:hidden;
white-space: nowrap;/*prevents wrapping*/
}

li{
display:inline-block;
zoom:1; *display: inline;/*IE7 Fix for inline-block*/
}

希望这对你有帮助!

hunter 14 年前

ul { width: 800px; overflow: hidden; }

Richard Marskell - Drackir Sunil Tandon 14 年前

如果你想最终滑动标签,你需要把 <ul> 在相对位置 <div> 标记以便设置 left CSS值来前后移动它。您可以在这里看到我的示例: http://jsfiddle.net/baetL/

编辑
这里,使用您的示例: http://jsfiddle.net/HrffC/1/

Community kfsone 7 年前

AS wilsonpage 说,

溢出:隐藏;(用于隐藏容器外的内容)
空白:nowrap;(用于使内容在同一行上继续,直到 <br> )

是用来实现你想要的。

除此之外,您还必须使用一些jquery,以便使元素在按钮上滚动。

下面的代码片段中包含了相同的代码。

$('#scroll_left').click(function () {
    var leftPos = $('div.list_Items').scrollLeft();
    console.log(leftPos);
    $("div.list_Items").animate({
        scrollLeft: leftPos - 230
    }, 800);
});

$('#scroll_right').click(function () {
    var leftPos = $('div.list_Items').scrollLeft();
    console.log(leftPos);
    $("div.list_Items").animate({
        scrollLeft: leftPos + 230
    }, 800);
});

.container {
    padding-bottom:5px;
    border-bottom: 1px solid black;
    width:310px;
}
.list_Items {
    width:230px;
    float:left;
    overflow:hidden;
    margin-right:20px;
}
.tabs {
    margin: 0 0 10px;
    padding: 0 0 4px;
    cursor: pointer;
    white-space: nowrap;
}
.tabs li {
    background: #D1E2F3;
    border: 1px solid #fff;
    display: inline-block;
    font-family: arial;
    font-size: 11px;
    color: #227799;
    padding: 3px 10px;
}
.tabs li a, .tabs li a:hover {
    text-decoration: none !important;
    font-size: 11px;
    color: #666;
}
.tabs li.title {
    background: none;
    border: 0;
}
.tabs li.active {
    background: #092B44;
    border: 1px solid #092B44;
    color: white;
}
.tabs li.active a {
    color: #fff !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="list_Items">
        <!-- The width is limited -->
        <ul class="tabs">
            <li class="active">List-Item-1</li>
            <li>List-Item-2</li>
            <li>List-Item-3</li>
            <li>List-Item-4</li>
            <li>List-Item-5</li>
            <li>List-Item-6</li>
            <li>List-Item-7</li>
            <li>List-Item-8</li>
            <li>List-Item-9</li>
            <li>List-Item-10</li>
        </ul>
    </div>
    <button id="scroll_left">&lt;</button>
    <button id="scroll_right">&gt;</button>
</div>

在这里,我使用了两个带有ids scroll_left和scroll_right的按钮,分别用于向左和向右滚动。

-2

rommer 13 年前

html,body {width:100%;height:100%;border:0;margin:0;}
ul {width:100%; position:relative;}