Question

如何删除第一个标签左侧以及标签和内容之间的空白区域？你会看到我在CSS中插入了很多margin:0px;行，但没有一行会删除空格。

<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a>

        </li>
        <li><a href="#tab2">Tab #2</a>

        </li>
        <li><a href="#tab3">Tab #3</a>

        </li>
        <li><a href="#tab4">Tab #4</a>

        </li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab active">Content tab1</div>
        <div id="tab2" class="tab">Content tab2</div>
        <div id="tab3" class="tab">Content tab3.</div>
        <div id="tab4" class="tab">Content tab4</div>
    </div>
</div>

Answer 1

你试过padding-left: 0px吗？似乎在这里工作。

Answer 2

更改

.tab-links ul {
   margin: 0px;
}

到

.tabs ul{
   margin:0px;
}

html解释

 <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab #1</a>

    </li>      
</ul>

原因。您在ul之后选择了.tab-links ul，因此我要求您需要的ul的父元素，我用它来选择您需要的ul

updated fiddle

Answer 3

您可以添加以下css以从第一个左侧标签中删除空格：

.tab-links {
    margin-left:0;
    padding-left:0;
}

.tab-links li:first-child {
    margin-left:0;
}

这是更新的小提琴：https://jsfiddle.net/38h8acaq/1/

Answer 4

关于你的第一个问题

您在标签链接上有padding-left:40px，

使用.tab-links{padding:0}

重置它

Answer 5

＆＃13;

.tabs {
width: 100%;
display: inline-block;
}
/*----- Tab Links -----*/

/* Clearfix */
 .tab-links:after {
display: block;
clear: both;
content:'';
}
ul.tab-links {
padding: 0;
margin: 0px;
}
.tab-links li {
margin: 0px 5px;
float: left;
list-style: none;
margin-bottom:0px;
}
.tab-links li:first-child{
 margin-left: 0;
}
.tab-links a {
padding: 9px 15px;
display: inline-block;
border-radius: 2px 2px 0px 0px;
background: #7FB5DA;
font-size: 16px;
font-weight: 600;
color: #4c4c4c;
transition: all linear 0.15s;
margin:0px;
}
.tab-links a:hover {
background: #a7cce5;
text-decoration: none;
}
li.active a, li.active a:hover {
background: #da7fca;
color: #4c4c4c;
}
/*----- Content of Tabs -----*/
 .tab-content {
margin: 0px;
padding: 10px;
border-radius: 2px;
background: #ff0005;
}
.tab {
display: none;
margin: 0px;
}
.tab.active {
display: block;
}

＆＃13;

<div class="tabs">
<ul class="tab-links">
    <li class="active"><a href="#tab1">Tab #1</a>

    </li>
    <li><a href="#tab2">Tab #2</a>

    </li>
    <li><a href="#tab3">Tab #3</a>

    </li>
    <li><a href="#tab4">Tab #4</a>

    </li>
</ul>
<div class="tab-content">
    <div id="tab1" class="tab active">Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</div>
    <div id="tab2" class="tab">Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</div>
    <div id="tab3" class="tab">Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</div>
    <div id="tab4" class="tab">Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</div>
</div>
</div>

＆＃13;

如何删除CSS中不需要的空白区域

5 个答案: