CODEWITHSUNDEEP
htmlcss
BrunoLM
BrunoLM

Reputation: 100361

How to put unlimited number of elements on the same line?

I have a menu:

<ul>
    <li>Tab 01</li>
    <li>Tab 02</li>
    <li>Tab 03</li>
    <li>Tab 04</li>
</ul>

I want to put as many tabs as I need, and I want to keep them on the same line. I want to create a control to slide the tabs:

tab02 Right arrow click

tab01 Left arrow click

What do I have to do on CSS to get this behavior? All elements on the same line regardless of the number of elements...

An example of my problem on jsFiddle

Upvotes: 0

Views: 3209

Answers (5)

avnaveen
avnaveen

Reputation: 562

As wilsonpage said,

  • overflow:hidden; (used to hide the content which is outside the container)
  • white-space: nowrap; (Used to make the content continues on the same line until a <br>)

are used to achieve what you want.

along with that u have to use some jquery in order to make the elements scroll on button click.

The code for the same has been included in the snippet below.

$('#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>

here, I have used two buttons with ids scroll_left and scroll_right which are used to scroll left and right respectively.

Upvotes: 1

rommer
rommer

Reputation: 1

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

Upvotes: -2

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13312

If you want to eventually slide the tabs, you'll want to put the <ul> in a relatively positioned <div> tag so you can set the left css value to move it back and forth. You can see my examples here: http://jsfiddle.net/baetL/

Edit
And here, using your example: http://jsfiddle.net/HrffC/1/

Upvotes: 1

wilsonpage
wilsonpage

Reputation: 17600

I see what you are trying to do and if you are floating your li's you will find that they are wrapped by their container and spill onto the next line. To get round this problem you need to use the following code:

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

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

Hope this helps mate!

W.

Upvotes: 4

hunter
hunter

Reputation: 63542

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

Upvotes: 2

Related Questions