CODEWITHSUNDEEP
htmlcss
user2779544
user2779544

Reputation: 429

How to remove space between ul and li

My html and css code

<ul class="tabs">  
    <li><a href="#" class="tab active">Tab one</a></li>  
    <li><a href="#" class="tab">Largeeeeeeeeeeeeeeeeeeeeeeee  Tab</a></li>  
    <li><a href="#" Class="tab">Tab three</a></li>                                                                                                                                      
</ul>
<div class="content" style="overflow-x:scroll;">
    CONTENT
</div>



ul.tabs {
    margin: 0px;
    padding: 0px;
}

ul.tabs li {
    list-style: none;
    display: inline;        
}

ul.tabs li a {  
    display:inline-block;
    width:10%;      
    margin-bottom:0px;  
    color: #FFFFFF;
    padding: 8px 14px 8px 14px;
    text-decoration: none;
    font-size: 9px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid #ffcce5;  
    background: #ffcce5;
    border-radius:6px 6px 0 0;  
    text-overflow: ellipsis;    
    white-space: nowrap;    
    overflow:hidden;    
}
.content {
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #464c54;
}

I am trying to show a tab view,everything works fine until i add

text-overflow: ellipsis;    
white-space: nowrap;    
overflow:hidden;

here a gap is show between ul and li,i could not remove the gap(Horizontal) without removing

overflow:hidden;

I dont know where i went wrong.

Thanks

EDIT: --jsfiddle

Upvotes: 1

Views: 4787

Answers (5)

Ferie
Ferie

Reputation: 1436

Use just this

ul {
    font-size: 0;
}

Working example

Upvotes: 0

codingrose
codingrose

Reputation: 15699

inline-block adds white space between elements.

Write elements on same line rather than writing them on separate line to resolve problem.

Change

<ul class="tabs">  
    <li><a href="#" class="tab active">Tab one</a></li>  
    <li><a href="#" class="tab">Largeeeeeeeeeeeeeeeeeeeeeeee  Tab</a></li>  
    <li><a href="#" Class="tab">Tab three</a></li>                                                                                                                                      
</ul>

to

<ul class="tabs">  
    <li><a href="#" class="tab active">Tab one</a></li><li><a href="#" class="tab">Largeeeeeeeeeeeeeeeeeeeeeeee  Tab</a></li><li><a href="#" Class="tab">Tab three</a></li>                                                                                                                                      
</ul>

CSS:

.content {
    margin-top:-1px;
}

Demo here.

Upvotes: 6

Nitesh
Nitesh

Reputation: 15739

Here you go.

WORKING DEMO

The CSS Change:

.content {
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #464c54;
    margin-top: -5px;    
}

Hope this helps.

Upvotes: 2

Vikram Deshmukh
Vikram Deshmukh

Reputation: 15606

In your css apply this style. This will only remove the gap betwenn the ul and the div

ul.tabs li a {
    display: inline-flex;
}

Upvotes: -1

Michael Tempest
Michael Tempest

Reputation: 834

inline-block adds white space between elements. There are many different ways to do this, but my favourite is to simply use HTML comments so that you can keep good formatting of your code.

<ul class="tabs">  
    <li><a href="#" class="tab active">Tab one</a></li><!--  
    --><li><a href="#" class="tab">Largeeeeeeeeeeeeeeeeeeeeeeee  Tab</a></li><!--  
    --><li><a href="#" Class="tab">Tab three</a></li>                                                                                                                                      
</ul>

Upvotes: 1

Related Questions