时间戳

首页 > 解决方案 > 为什么 ul 和第一个 li 元素之间有一个空格？

html - 为什么 ul 和第一个 li 元素之间有一个空格？

问题描述

空间不在行内块元素之间。它发生在第一个 li 之前和最后一个 li 之后。因此，填充不会达到 100%。我已经尝试删除空白，但它似乎没有帮助，因为它没有显示内联元素之间的空间。

HTML：

    header {
    	width: 100%;
    }
    
    body {
    	margin: 0;
    	height: 100%;
    }
    
    #page {
    	height: 100%;
    	width: 100%;
    	margin: 0;
    	padding: 0;
    }
    
    #backgroundimg {
    	display: none;
    	opacity: 0.4;
    	width: 100%;
    	height: 100%;
    	padding: 0;
    	margin: 0;
    }
    
    #navpane {
    	text-align: center;
    	height: 60px;
    	width: 100%;
    	background: #d7dfed;
    	position: absolute;
    	opacity: 0.4;
    	top: 0;
    }
    
    #options {
    	list-style: none;
    	max-width: 100%;
    	margin: 0;
    	padding: 0 10%;
    	
    }
    
    #options li {
    	display: inline-block;
    	padding: 0 10%;
    	margin: 0;
    	text-align: none;
    }
    
    #options a {
    	float: left;
    	font-size: 30px;
    	padding: 15px 0px;
    }
    	
    #shirtdrop {
    	background-color: inherit;
    	outline: none;
    	border: none;
    	padding: 0;
    }
    
    #shoedrop {
    	max-width: 140px;
    	background-color: inherit;
    	outline: none;
    	border: none;
    	padding: 0;
    }
    
    #pantsdrop {
    	background-color: inherit;
    	outline: none;
    	border: none;
    	padding: 0;
    }
    	
    #photochanger {
    	position: absolute;
    	height: 20%;
    	width: 70%;
    	border: black;
    	border-width: 1px;
    	border-style: solid;
    	bottom: 45%;
    	left: 15%;
    }
  <!DOCTYPE HTML>
    <html id="page">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<link rel="stylesheet" href="stylesheet.css">
    		<script src="script.js"></script>
    		<script src="jquery.js"></script>
    	</head>
    	<body>
    		<img id="backgroundimg" onload="fadeIn(backgroundimg)" src="C:\Users\Jessica and Larry\Desktop\Projects\Test Template 1\img\background1.jpg">
    		<div id="navpane">
    			<ul id="options"><li><button id="shirtdrop"><a>Shirts</a></button></li><li><button id="shoedrop"><a>Pants</a></button></li><li><button id="pantsdrop"><a>Shoes</a></button></li></ul>
    		</div>
    		<div id="photochanger">
    				<img>
    		</div>
    	</body>
    </html>

标签： htmlcss

解决方案

您神秘的额外空间有几个原因：

  1. 您正在使用一个无序列表项 ( ul)，默认情况下它会从大多数浏览器中获得一个小填充。
  2. ul您正在向和li元素添加自己的填充。

解决方案

删除li和ul样式上的填充并使用flexbox。只需display: flex;在父元素上应用 a ，然后 flex ( flex: 1) 每个子元素。现在，无论您的屏幕调整多大或多小，它们都应该始终完美地适合父容器。使用 flexbox 还意味着您不再需要通过累加百分比来确保使用 100% 的痛苦。

header {
  width: 100%;
}

body {
  margin: 0;
  height: 100%;
}

#page {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#backgroundimg {
  display: none;
  opacity: 0.4;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#navpane {
  text-align: center;
  height: 60px;
  width: 100%;
  background: #d7dfed;
  position: absolute;
  opacity: 0.4;
  top: 0;
}

#options {
  list-style: none;
  max-width: 100%;
  margin: 0;
  display: flex; //add this
  //padding: 0 10%; ---> remove this
}

.option {
  display: inline-block;
  flex: 1; // add this
  //padding: 0 10%; ---> remove this
  margin: 0;
  text-align: none;
}

#options a {
  float: left;
  font-size: 30px;
  padding: 15px 0px;
}

#shirtdrop {
  background-color: inherit;
  outline: none;
  border: none;
  padding: 0;
}

#shoedrop {
  max-width: 140px;
  background-color: inherit;
  outline: none;
  border: none;
  padding: 0;
}

#pantsdrop {
  background-color: inherit;
  outline: none;
  border: none;
  padding: 0;
}

#photochanger {
  position: absolute;
  height: 20%;
  width: 70%;
  border: black;
  border-width: 1px;
  border-style: solid;
  bottom: 45%;
  left: 15%;
}
<!DOCTYPE HTML>
<html id="page">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="stylesheet.css">
  <script src="script.js"></script>
  <script src="jquery.js"></script>
</head>

<body>
  <img id="backgroundimg" onload="fadeIn(backgroundimg)" src="C:\Users\Jessica and Larry\Desktop\Projects\Test Template 1\img\background1.jpg">
  <div id="navpane">
    <div id="options">
      <div class="option"><button id="shirtdrop"><a>Shirts</a></button></div>
      <div class="option"><button id="shoedrop"><a>Pants</a></button></div>
      <div class="option"><button id="pantsdrop"><a>Shoes</a></button></div>
    </div>
  </div>
  <div id="photochanger">
    <img>
  </div>
</body>

</html>

推荐阅读