How to change the width of css tab according to length of alphabet?

Tags: html,css

Problem :

It's a tab menu of css. I tried to write a long name in one tab so its out its position you can check the images on following links:

This is the orignal one:

When I changed in css enter image description here

.tabs {width:100%;overflow:auto;}
.tabs li {float:left;padding-right:1px;}
.tabs .end {padding:0}
.tabs a {display:block;width:66px;font-size:13px;line-height:31px;color:#fff;text-transform:uppercase;text-align:center;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;behavior:url(js/;position:relative;background:url(../images/tabs_bg.gif) bottom repeat-x #3081c8;text-decoration:none;p}
.tabs a:hover, .tabs .active {background:url(../images/bg_form.gif) repeat}
.tabs_cont {border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;behavior:url(js/;position:relative;background:url(../images/bg_form.gif) repeat;padding:30px 35px 28px;width:1000px;height:500px;}

and this is the HTML

 <ul class="tabs">
        <li><a href="#" id="changeText">inclusive Class</a></li>
        <li><a href="#" id="changeText2">inclusive Class</a></li>
        <li><a href="#" id="changeText3">inclusive Class</a></li>
        <li class="end"><a href="#" id="changeText5">inclusive Class</a></li>

Please any one help me out how to look its original bit with long text?

Solution :

the reason is that your ul (tabs) is in article.col which has a width of 267px so when you say 100% for ul width it expands only that much.

make it 1000px.

also remove the tabs a width.

    CSS Howto..

    How can I create custom scrollbar (jScrollPane) with knockout binding?

    how to create a pricetag like border around list items

    How I do edit the css for just the home page on Magento?

    How to detect whether a browser has tap highlighting?

    Css how to replace block after click button

    how to decrease space between headings?

    How to customize Subscribe2 button appearance in WordPress?

    How to pass the output of CSS Selector to beautiful soup?

    How to force the horizontal scroll bar to appear?

    How to create a custom scrollbar on a div (Facebook style)

    How to have different transition durations for css and angular transition on same element?

    how to add an overlaying color over an image with css

    How to change the font size in table cells according to cells content?

    how to write a CSS rule that only applies if position:fixed is not supported or Jquery-test for position:fixed?

    How to make sure the UI always shrinks and fit to the window irrespective of the resolution and device via viewport or CSS

    Hovering over a container div shows hidden div. When cursor is put over hidden div, behavior of container div changes

    How to remove the BG image on jQueryUI autocomplete combo (select)

    How to place the block on the top of “second” screen using CSS?

    How to layout images in 3 columns [closed]

    How I write a:hover::before in less file?

    show the div inside that div next to it

    How to disable a CSS class with javascript on window.load()

    How to set background color of td in CSS

    How to make <'details'> drop down on mouse hover

    How can I read a CSS property value using Javascript?

    JavaScript or CSS: How can I make a transition of one element to another?

    How do I get this text using Jsoup?

    960 CSS Framework, how to get full 960 width?

    Google Apps Script How to link to JS or CSS file on Google Drive

    How do you add a css class (Bootstrap) to a select field with a loop inside in Rails?