嵌套选项卡之间的空格

时间：2016-06-02 11:13:10

标签： html css

任何人都可以解释为什么在嵌套选项卡中我将它放在第二个选项卡（名为“Letture”）中，选项卡右侧有一个空格，而第一个选项卡则没有？

两个标签的CSS代码是相同的，我不明白为什么它们的行为不同

$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
		
		$('ul.tabs li').each(function () {
			var nimg = $(this).find('img').attr('src');
			$(this).find('img').attr('src', nimg.replace('_r', '_g'));
		});
		
		var img = $(this).find( 'img' ).attr('src');
		$(this).find( 'img' ).attr('src', img.replace('_g', '_r'));
		
	});
$("ul.subtabs li").click(function(){
			var tab_id = $(this).attr("data-tab");

			$("ul.subtabs li").removeClass("current");
			$(".subtab-content").removeClass("current");

			$(this).addClass("current");
			$("#"+tab_id).addClass("current");
			
			$("ul.subtabs li").each(function () {
				var nimg = $(this).find("img").attr("src");
				$(this).find("img").attr("src", nimg.replace("_r", "_g"));
			});
			
			var img = $(this).find( "img" ).attr("src");
			$(this).find( "img" ).attr("src", img.replace("_g", "_r"));
		});
ul.tabs, ul.subtabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.tabs li, ul.subtabs li{
	line-height: 24px;
	background: #ededed;
	color: #777;
	display: inline-block;
	padding: 10px 40px;
	cursor: pointer;
	font: 16pt arial,verdana !important;
	border: 1px solid rgb(164, 162, 162);
	border-right: medium none;
}

ul.tabs li.current, ul.subtabs li.current{
	background: none;
	color: rgb(227,32,46);
	border-bottom: 0;
	border-top: 3px solid rgb(227,32,46);
	padding-top: 8px;
}

.tab-content, .subtab-content {
	display: none;
	padding-top: 15px;
}

.tab-content.current, .subtab-content.current {
	display: inherit;
}

ul.tabs > li > img, ul.subtabs > li > img {
	margin-right: 5px;
	width: 24px;
	height: 24px;
}

.tabLast {
	border-right: 1px solid rgb(164, 162, 162) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tabs">
			<li data-tab="tab-1" class="tab-link"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png"> Amministratore</li><li data-tab="tab-2" class="tab-link current"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_r.png"> Letture</li><li data-tab="tab-3" class="tab-link"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png"> Unità immobiliari</li><li data-tab="tab-5" class="tab-link tabLast"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png"> Riparti</li></ul>
<div data-loaded="1" class="tab-content" id="tab-1"><div class="mb20">&nbsp;</div><h3>Amministratore</h3></div>
<div data-loaded="1" class="tab-content current" id="tab-2"><ul class="subtabs">
    <li data-tab="tab-af" class="tab-link"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png"> Acqua fredda</li>
	<li data-tab="tab-ac" class="tab-link"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png"> Acqua calda</li>
    <li data-tab="tab-ca" class="tab-link tabLast current"><img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_r.png"> Calore</li>
  </ul><div id="tab-af" class="subtab-content" data-loaded="1">Freddo!</div>
	<div id="tab-ac" class="subtab-content" data-loaded="1">Caldo!</div>
	<div id="tab-ca" class="subtab-content current" data-loaded="1">Calore!</div>
</div>

2 个答案:

答案 0 :(得分：2)

这是因为它们显示为inline-block是内联元素，因此会产生间隙，因此解决此问题的一种方法是将font-size:0设置为父ul。

查看更多信息here 

$('ul.tabs li').click(function() {
  var tab_id = $(this).attr('data-tab');

  $('ul.tabs li').removeClass('current');
  $('.tab-content').removeClass('current');

  $(this).addClass('current');
  $("#" + tab_id).addClass('current');

  $('ul.tabs li').each(function() {
    var nimg = $(this).find('img').attr('src');
    $(this).find('img').attr('src', nimg.replace('_r', '_g'));
  });

  var img = $(this).find('img').attr('src');
  $(this).find('img').attr('src', img.replace('_g', '_r'));

});
$("ul.subtabs li").click(function() {
  var tab_id = $(this).attr("data-tab");

  $("ul.subtabs li").removeClass("current");
  $(".subtab-content").removeClass("current");

  $(this).addClass("current");
  $("#" + tab_id).addClass("current");

  $("ul.subtabs li").each(function() {
    var nimg = $(this).find("img").attr("src");
    $(this).find("img").attr("src", nimg.replace("_r", "_g"));
  });

  var img = $(this).find("img").attr("src");
  $(this).find("img").attr("src", img.replace("_g", "_r"));
});
ul.tabs,
ul.subtabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-size:0
}
ul.tabs li,
ul.subtabs li {
  line-height: 24px;
  background: #ededed;
  color: #777;
  display: inline-block;
  padding: 10px 40px;
  cursor: pointer;
  font: 16pt arial, verdana !important;
  border: 1px solid rgb(164, 162, 162);
  border-right: medium none;
}
ul.tabs li.current,
ul.subtabs li.current {
  background: none;
  color: rgb(227, 32, 46);
  border-bottom: 0;
  border-top: 3px solid rgb(227, 32, 46);
  padding-top: 8px;
}
.tab-content,
.subtab-content {
  display: none;
  padding-top: 15px;
}
.tab-content.current,
.subtab-content.current {
  display: inherit;
}
ul.tabs > li > img,
ul.subtabs > li > img {
  margin-right: 5px;
  width: 24px;
  height: 24px;
}
.tabLast {
  border-right: 1px solid rgb(164, 162, 162) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tabs">
  <li data-tab="tab-1" class="tab-link">
    <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png">Amministratore</li>
  <li data-tab="tab-2" class="tab-link current">
    <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_r.png">Letture</li>
  <li data-tab="tab-3" class="tab-link">
    <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png">Unità immobiliari</li>
  <li data-tab="tab-5" class="tab-link tabLast">
    <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png">Riparti</li>
</ul>
<div data-loaded="1" class="tab-content" id="tab-1">
  <div class="mb20">&nbsp;</div>
  <h3>Amministratore</h3>
</div>
<div data-loaded="1" class="tab-content current" id="tab-2">
  <ul class="subtabs">
    <li data-tab="tab-af" class="tab-link">
      <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png">Acqua fredda</li>
    <li data-tab="tab-ac" class="tab-link">
      <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_g.png">Acqua calda</li>
    <li data-tab="tab-ca" class="tab-link tabLast current">
      <img style="float:left;" src="http://www.fantamondi.it/silcam/images/pencil_r.png">Calore</li>
  </ul>
  <div id="tab-af" class="subtab-content" data-loaded="1">Freddo!</div>
  <div id="tab-ac" class="subtab-content" data-loaded="1">Caldo!</div>
  <div id="tab-ca" class="subtab-content current" data-loaded="1">Calore!</div>
</div>

答案 1 :(得分：2)

知道问题。因li元素后面带有inline-block显示选项的新行而发生错误。 第一个标签没有空格，因为HTML是

<ul>
 <li></li><li></li>
</ul>

第二个标签有空格，因为：

<ul>
  <li></li>
  <li></li>
</ul>
相关问题
最新问题