问

如何删除ul和li之间的空格

mobiledu2502863807 发布于 2023-02-12 21:45

html

我的html和css代码

  
    Tab one  
    Largeeeeeeeeeeeeeeeeeeeeeeee  Tab  
    Tab three                                                                                                                                      


    CONTENT




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;
}

我试图显示一个标签视图,一切正常,直到我添加

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

这里在ul和li之间显示一个间隙,我无法移除间隙(水平)而不移除

overflow:hidden;

我不知道我哪里出错了.

谢谢

编辑: - jsfiddle

1 个回答

inline-block 在元素之间添加空白.

在同一行写入元素而不是将它们写在单独的行上以解决问题.

更改

<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>

至

<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;
}

在这里演示.

2023-02-12 21:55 回答

黄骏捷

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签