摆脱两个ul li元素之间不需要的空间

时间：2016-02-19 20:40:21

标签： jquery html css html5 css3

我真的需要你的帮助。

如何删除我的2个UL LI列表之间创建的讨厌的小空间？我怀疑它与<dd>标签有关，但我不知道在哪里纠正问题。

以下是问题的图片：

enter image description here

这是预期结果的图片：

enter image description here

这是HTML和CSS标记：

<!DOCTYPE html>

<html>

<head>

<script src="jquery-1.11.3.min.js"></script>

<style type="text/css">
* {
  font-family: Segoe UI;
  font-size: 9pt;
}
.select dd, .select dt, .select ul {
  margin: 0px;
  padding: 0px;
}
.select dd {
  position: relative;
}
.select a, .select a:visited {
  color: #000;
  text-decoration: none;
  outline: none;
}
.select dt:hover, .select dd ul:hover {
  border-color: rgb(128,128,128);
}
.select dd ul li a:hover {
  background-color: rgb(112, 146, 190);
  color: #FFF;
}
.select dt {
  background: url(arrow.png) no-repeat scroll right center;
  display: block;
  padding-right: 20px;
  border: 1px solid rgb(170, 170, 170);
  width: 180px;
  overflow: hidden;
}
.select dt span {
  cursor: pointer;
  display: block;
  padding: 4px;
  height: 15px;
}
.select dd ul {
  background: #fff none repeat scroll 0 0;
  border-bottom: 1px solid rgb(170, 170, 170);
  border-left: 1px solid rgb(170, 170, 170);
  border-right: 1px solid rgb(170, 170, 170);
  border-top: 0;
  display: none;
  left: 0px;
  padding: 5px 0px;
  position: absolute;
  top: -1px;
  width: auto;
  min-width: 200px;
  list-style: none;
}
.select dd ul li a {
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  display: block;
}
.selected {
  background: rgb(195, 195, 195);
}
.header-list, .header-list:hover {
  padding-left: 3px;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
}
</style>

<script type="text/javascript">

$(document).ready(function() {

    $(".select dt").click(function(e) {
        e.stopPropagation();
        var select = $(this).closest('.select');
        select.find('ul').toggle();
        select.find("dt, dd ul").css('border-color', 'rgb(128,128,128)')
    });

    $(".select dd ul li a").click(function(e) {
        var text = $(this).html();
        var select = $(this).closest('.select');

        if ((select.data('val') == 'multiple') && (e.ctrlKey)) {
            e.stopPropagation()
            $(this).addClass('selected');
            select.find('dt span').html("(" + select.find('a.selected').length + ")");
            //select.find('dt span').html(get_data_array(select.find('dd ul').attr('id')).join(",")) Comma-Seperated List
        }
        else {
            var text = $(this).html();
            select.find("dd a").removeClass('selected');
            $(this).addClass('selected');
            select.find("dt span").html(text);
            //select.find("dt a").css("background-color", "");
            select.find("dd ul").hide();
        }
    });

    $(document).bind('click', function() {
        $(".select dd ul").hide();
        $(".select dt, .select dd ul").css('border-color', '');
    });

});
</script>

</head>

<body>

<table style="border-collapse: collapse;" cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <dl data-val="multiple" class="select">
        <dt><span id="fruits"></span></dt>
        <dd>
            <ul id="select_fruits">
                <li><a data-val="" href="#">&nbsp;</a></li>
                <span class="header-list">- Fruits -</span>
                <li><a href="#">Apples</a></li>
                <li><a href="#">Bananas</a></li>
                <li><a href="#">Oranges</a></li>
            </ul>
        </dd>
    </dl>
    </td>
    </tr>

    <tr>
        <dl class="select">
        <dt><span id="vegetables"></span></dt>
        <dd>
            <ul>
                <li><a data-val="" href="#">&nbsp;</a></li>
                <li><a href="#">Carrots</a></li>
                <li><a href="#">Celery</a></li>
                <li><a href="#">Brocoli</a></li>
            </ul>
        </dd>
    </dl>

</tr>
</td>
</table>

</body>

</html>

2 个答案:

答案 0 :(得分：0)

在css中使用以下代码

.select {
  margin: 0;
  padding: 0;
}

答案 1 :(得分：0)

将margin:0添加到<dl>元素：

＆＃13;
＆＃13; 
* {
  font-family: Segoe UI;
  font-size: 9pt;
}
.select dd,
.select dt,
.select ul {
  margin: 0px;
  padding: 0px;
}
.select dd {
  position: relative;
}
.select a,
.select a:visited {
  color: #000;
  text-decoration: none;
  outline: none;
}
.select dt:hover,
.select dd ul:hover {
  border-color: rgb(128, 128, 128);
}
.select dd ul li a:hover {
  background-color: rgb(112, 146, 190);
  color: #FFF;
}
.select dt {
  background: url(arrow.png) no-repeat scroll right center;
  display: block;
  padding-right: 20px;
  border: 1px solid rgb(170, 170, 170);
  width: 180px;
  overflow: hidden;
}
.select dt span {
  cursor: pointer;
  display: block;
  padding: 4px;
  height: 15px;
}
.select dd ul {
  background: #fff none repeat scroll 0 0;
  border-bottom: 1px solid rgb(170, 170, 170);
  border-left: 1px solid rgb(170, 170, 170);
  border-right: 1px solid rgb(170, 170, 170);
  border-top: 0;
  display: none;
  left: 0px;
  padding: 5px 0px;
  position: absolute;
  top: -1px;
  width: auto;
  min-width: 200px;
  list-style: none;
}
.select dd ul li a {
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  display: block;
}
.selected {
  background: rgb(195, 195, 195);
}
.header-list,
.header-list:hover {
  padding-left: 3px;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
}
dl {
  margin: 0;
}
＆＃13; 
<table style="border-collapse: collapse;" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <dl data-val="multiple" class="select">
        <dt><span id="fruits"></span></dt>
        <dd>
          <ul id="select_fruits">
            <li><a data-val="" href="#">&nbsp;</a>
            </li>
            <span class="header-list">- Fruits -</span>
            <li><a href="#">Apples</a>
            </li>
            <li><a href="#">Bananas</a>
            </li>
            <li><a href="#">Oranges</a>
            </li>
          </ul>
        </dd>
      </dl>
    </td>
  </tr>

  <tr>
    <td>
      <dl class="select">
        <dt><span id="vegetables"></span></dt>
        <dd>
          <ul>
            <li><a data-val="" href="#">&nbsp;</a>
            </li>
            <li><a href="#">Carrots</a>
            </li>
            <li><a href="#">Celery</a>
            </li>
            <li><a href="#">Brocoli</a>
            </li>
          </ul>
        </dd>
      </dl>
    </td>
  </tr>

</table>
＆＃13;
＆＃13;
＆＃13;

另请注意，您的HTML表格标记有错误（上面已修复）。

相关问题
最新问题