CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dino
Dino

Reputation: 8292

Expand horizontally not vertically

As you can see on the gif below, my Tabs are expanding vertically. However I want them to expand horizontally. I already tried with white-space:nowrap, and other things that proved to work for other people, but it just doesn't work in my case.

Image Example

HTML:

<div class="l_tabs">
  <div>
    <ul id="myTab1" class="nav nav-tabs bordered">
      <li class="tab-add">
      <li class="contentTab">
      <li class="contentTab">
      <li class="contentTab">
      <li class="contentTab">
      <li class="contentTab">
      <li class="contentTab active">
    </ul>
  </div>
</div>

CSS:

.l_tabs {
    background: #474544 none repeat scroll 0 0;
    display: block;
    height: 57px;
    overflow: auto;
    white-space: nowrap;
    width: 500px;
}
.l_tabs > div {
    background-color: white;
    height: 40px;
    padding-top: 4px;
    width: 99%;
}

Upvotes: 0

Views: 184

Answers (3)

Shandy Ardiansyah
Shandy Ardiansyah

Reputation: 132

You don't provide the CSS for the li, but I guess there's a float assigned to it, that's why the div stacked to bottom, you need to remove it and apply display: inline-block instead.

.tab-add,
.contentTab {
    float: none;
    display: inline-block;
}

Upvotes: 0

Surender Lohia
Surender Lohia

Reputation: 379

Try this:

.l_tabs > div {
    overflow-x: auto;
    white-space: nowrap;
}

Full Code:

.l_tabs {
    background: #474544 none repeat scroll 0 0;
    display: block;
    height: 57px;
    width: 500px;
}



.l_tabs > div {
    background-color: #fff;
    height: 40px;
    padding-top: 4px;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}


.l_tabs li {
  display: inline-block;
  padding: 0 50px;
}

Ref: https://jsbin.com/gogayo/edit?html,css,output

Upvotes: 0

Hitesh Misro
Hitesh Misro

Reputation: 3461

Change your width in .l_tabs{ }

width: 500px;

to

width: 100%;

Updated

Check this fiddle for your reference.

That would do it!

Upvotes: 1

Related Questions