在 div 容器内的 ul li 列表底部保持边距/填充答案

【问题标题】：Persisting margin/padding at bottom of ul li list inside div container在 div 容器内的 ul li 列表底部保持边距/填充
【发布时间】：2017-01-27 13:11:38
【问题描述】：

ul,
ol,
li {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-top:0 }
  ul ul,
  ul ol,
  ol ul,
  ol ol,
  ul li,
  li ul	{
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top:0 }
    
.columns{
    float: left;
    position: relative;
    margin-right: 20px;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
}

<div data-type="vertical" class="responsive-tabs responsive-tabs-boxed">
	                <ul data-group="tabs-group-default" class="resp-tabs-list text-center tabs-group-default">
	                  <li>Services</li>
	                  <li>Industries</li>
	                  <li>Advice &amp; Testing</li>
	                  <li>Treatments</li>
	                </ul>
	             <div data-group="tabs-group-default" class="resp-tabs-container text-left tabs-group-default">
                  <div>
                  	<ul>
                  		<li>Supply of cold-/hotforged and CNC-machined metal (round) products:</li>
                  			<ul><li>To standard specifications UNS/ASTM - DIN - BS - AFNOR - GOST</li>
                  				<li>Specials according to technical drawing<br></li>
                  			</ul>
                  		<li>Heat- &amp; surface treatments and material coatings, on all metals</li>
                  		<li>Advice on material and coating applications</li>
                  		<li>Inhouse testing equipment like saltspray, UV testing, ultra thin layer thickness measuring etc.</li>
                  	</ul>
                  </div>
                  <div>
		                <ul class="columns" data-columns="2">
		                  <li>Valves</li>
		                  <li>Chemical industries</li>
		                  <li>Maritime</li>
		                  <li>Water treatment</li>
		                  <li>Energy</li>
		                  <li>Offshore &amp; Shipbuilding</li>
		                  <li>Oil &amp; Gas</li>
		                  <li>Food industries</li>
		                  <li>Aviation</li>
		                  <li>Rails &amp; Construction</li>
		                </ul>
		            </div>

我有一个 bootstrap 盒装手风琴，它显示了 4 个列出的 div。该手风琴右侧显示的 2 个 div 也有列表。第一个似乎在底部有额外的空白，所以我的下一部分没有正确概述。我不知道它是什么，填充、边距还是？...我在 css 中为 ul、li、ul ul 等设置了所有填充和边距为 0。移除内部子弹也不起作用。

它仍然存在，而具有 ul 和 li 的另一个 div 与预期对齐。添加更多的文本行不会影响这个空间，它似乎在 16-20 像素左右。 enter image description here

我是新来的，不确定添加的图片是否可见，抱歉。有人知道吗？

【问题讨论】：

这在没有代码的情况下很难诊断，但很容易诊断。您是否尝试过在 chrome/firefox 中打开它并查看开发人员选项卡？把你的代码复制到jsfiddle，我可以看看。还有，欢迎！
也许你应该看看 ul，它有一个默认的 padding-left: 40px。
谢谢 Arlyon，这里是 jsfiddle.net/Banter23/qxkr6zg4 希望它足够清楚。特别是因为第二部分（列类）工作正常并且与手风琴中的其他 div 对齐，所以我不清楚它为什么会发生。如果这样更好，我会尝试将我的整个网站上传到隐藏地图？我的意思是我的 ftp 服务器，这是我自己的公司，我正在制作一个新网站。
#Evgeny 我做了，这就是为什么我在 css 中将它改为 0。
欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example

标签： css html-lists margin

【解决方案1】：

您可以将有序列表（ol）和无序列表（ul）的字体大小设置为 0px，它将删除该空间。

【讨论】：