CSS显示内联属性对我不起作用

时间：2017-08-09 12:38:15

标签： html5 css3

我正在尝试对齐section元素，如下所示

enter image description here

通过应用display: inline-block;属性连续

，这就是我所看到的

enter image description here

出于某种原因，我似乎无法让它发挥作用。我在下面包含了HTML和CSS代码。

如果有人可以提供建议，那将会很有帮助。

＆＃13;
＆＃13; 
body {
	background-color: #edeff2;
	margin: 25px;
}

header {
	margin-top: 15px;
	padding-bottom: 8px;
	padding-top: 8px;
	background-color: #b8babc;
	text-align: center;
	 color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center;
	/*I copied the above style from https://wdexplorer.com/20-examples-beautiful-css-typography-design/ */
}

nav {
	padding-bottom: 5px;
}

a {
	text-decoration: none;
}

a:hover {
	border: 1px solid;
}

h2 {
	color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -1px; line-height: 1;

}

section {
	display: inline-block;
	padding-top: 30px;
	padding-bottom: 30px;
	float: left;
	margin-right: 2%;
}

ul {
  list-style-type: none;
}

progress {
  color: #5ff4ef;
  font-size: .7em;
  line-height: 1.5em;
  text-indent: .5em;
  width: 15em;
  height: 1.8em;
  border: 1px solid #5ff4ef;
  background: #5ff4ef;
}

details {
	font-size: 1.2em;
	color: #028402;
}

details p {
	font-style: italic;
}

footer {
	background-color: #b8babc;
	font-size: 1.2em;
	clear: both;
}

img {
	width: 105px;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
	  <meta charset="UTF-8">
	  <title>Colleen</title>
	  <!-- ADD a LINK TO YOUR STYLE SHEET HERE!! -->
	  <link rel="stylesheet" href="style.css">
</head>

<body>
	 <header>
    	<h1>ALOK</h1>
		  	<nav>
			    <a href = "">One</a>
			    <a href = "">Two</a>
			    <a href = "">Three</a>
			    <a href = "">Four</a>
		  	</nav>
	 </header>
	  <section class="half">
		    <h2>Favorite Foods</h2>
		    <ul>
			      <li>Apples</li>
			      <li>Pizza</li>
			      <li>Crab</li>
			      <li>Chocolate Cake</li>
		    </ul>
	  </section>
  
	  	<section class="half">
		    <h2>Achievements</h2>
      		<p>	Progress in this course (100%)</100%><progress value = "1"></progress><br/>Progress in the Specialization (20%) <progress max = "5" value = "1"></progress><br/>		Progress in life goals (67%)<progress max = "100" value = "67"></progress></p>
  		</section>

  		<section class = "whole">
		    <h2>More About Me</h2>
		    <details open><summary>My Childhood</summary>
    		<p>I grew up in Bangalore India.  I lived near a Mango Grove and I used to steal a lot of them. </details>
	  	</section>
	
   		<footer>
		    <p><img src = "http://www.intro-webdesign.com/images/newlogo.png" alt = "logo"/> This page was created by your name &amp; Colleen van Lent.   To learn more about web design, visit <a href="http://www.intro-webdesign.com">Intro to Web Design</a>.</p>
	  </footer>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您需要添加width，例如30%：

body {
	background-color: #edeff2;
	margin: 25px;
}

header {
	margin-top: 15px;
	padding-bottom: 8px;
	padding-top: 8px;
	background-color: #b8babc;
	text-align: center;
	 color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 1; text-align: center;
	/*I copied the above style from https://wdexplorer.com/20-examples-beautiful-css-typography-design/ */
}

nav {
	padding-bottom: 5px;
}

a {
	text-decoration: none;
}

a:hover {
	border: 1px solid;
}

h2 {
	color: #111; font-family: 'Helvetica Neue', sans-serif; font-size: 20px; font-weight: bold; letter-spacing: -1px; line-height: 1;

}

section {
	display: inline-block;
  width: 30%;
	padding-top: 30px;
	padding-bottom: 30px;
	float: left;
	margin-right: 2%;
}

ul {
  list-style-type: none;
}

progress {
  color: #5ff4ef;
  font-size: .7em;
  line-height: 1.5em;
  text-indent: .5em;
  width: 15em;
  height: 1.8em;
  border: 1px solid #5ff4ef;
  background: #5ff4ef;
}

details {
	font-size: 1.2em;
	color: #028402;
}

details p {
	font-style: italic;
}

footer {
	background-color: #b8babc;
	font-size: 1.2em;
	clear: both;
}

img {
	width: 105px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	  <meta charset="UTF-8">
	  <title>Colleen</title>
	  <!-- ADD a LINK TO YOUR STYLE SHEET HERE!! -->
	  <link rel="stylesheet" href="style.css">
</head>

<body>
	 <header>
    	<h1>ALOK</h1>
		  	<nav>
			    <a href = "">One</a>
			    <a href = "">Two</a>
			    <a href = "">Three</a>
			    <a href = "">Four</a>
		  	</nav>
	 </header>
	  <section class="half">
		    <h2>Favorite Foods</h2>
		    <ul>
			      <li>Apples</li>
			      <li>Pizza</li>
			      <li>Crab</li>
			      <li>Chocolate Cake</li>
		    </ul>
	  </section>
  
	  	<section class="half">
		    <h2>Achievements</h2>
      		<p>	Progress in this course (100%)</100%><progress value = "1"></progress><br/>Progress in the Specialization (20%) <progress max = "5" value = "1"></progress><br/>		Progress in life goals (67%)<progress max = "100" value = "67"></progress></p>
  		</section>

  		<section class = "whole">
		    <h2>More About Me</h2>
		    <details open><summary>My Childhood</summary>
    		<p>I grew up in Bangalore India.  I lived near a Mango Grove and I used to steal a lot of them. </details>
	  	</section>
	
   		<footer>
		    <p><img src = "http://www.intro-webdesign.com/images/newlogo.png" alt = "logo"/> This page was created by your name &amp; Colleen van Lent.   To learn more about web design, visit <a href="http://www.intro-webdesign.com">Intro to Web Design</a>.</p>
	  </footer>

</body>

</html>

答案 1 :(得分：0)

我对你的html和css的section标签进行了一些更改。它会为你工作

＆＃13;
＆＃13; 
section.half {
	display: inline-block;
	padding-top: 30px;
	padding-bottom: 30px;
	float: left;
	margin-right: 2%;
}

ul {
  list-style-type: none;
}
＆＃13; 
	  <section class="half">
		    <h2>Favorite Foods</h2>
		    <ul>
			      <li>Apples</li>
			      <li>Pizza</li>
			      <li>Crab</li>
			      <li>Chocolate Cake</li>
		    </ul>
	  </section>
  
	  	<section class="half">
		    <h2>Achievements</h2>
      		<p>	Progress in this course (100%)</100%><progress value = "1"></progress><br/>Progress in the Specialization (20%) <progress max = "5" value = "1"></progress><br/>		Progress in life goals (67%)<progress max = "100" value = "67"></progress></p>
  		</section>

  		<section class = " half whole">
		    <h2>More About Me</h2>
		    <details open><summary>My Childhood</summary>
    		<p>I grew up in Bangalore India.  I lived near a Mango Grove and I used to steal a lot of them. </details>
	  	</section>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题