Question

内联块元素之间没有空格。它发生在第一个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>

Answer 1

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

您使用的是无序列表项（ul），默认情况下，大多数浏览器都会填充其中一小部分。
您正在为ul和li元素添加自己的填充。

解决方案

删除li和ul样式上的填充，并使用 flexbox 。只需在父元素上应用display: 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>

为什么ul和first li元素之间有空格？

1 个答案: