無序和有序列表不對齊到列

我正在嘗試創建3列網頁。無序和有序列表的我的項目符號不與列中的相應文本對齊。另外，對於我的中間欄目，文字一起縮小。我如何區分這些段落？無序和有序列表不對齊到列

* { 
 
    font-family: Melvetica; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
body { 
 
    background-color: #6B6A67; 
 
} 
 
#container { 
 
    width: 920px; 
 
    background-color: white; 
 
    padding: 10px; 
 
    margin-left: auto; 
 
    /*will center your page*/ 
 
    margin-right: auto; 
 
    /*will center your page*/ 
 
} 
 
h1, 
 
h2 { 
 
    text-align: center; 
 
} 
 
li { 
 
    text-align: center; 
 
    padding: 5px; 
 
} 
 
h4 { 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 
/*To style an ID within an ID under it use the parent ID--start with header then call the ID you want to select*/ 
 

 
#container #header { 
 
    height: 80px; 
 
    background-color: #ADA9A0; 
 
    padding-top: 20px; 
 
    padding-left: 10px; 
 
    padding-right: 20px; 
 
    margin-bottom: 5px; 
 
    /*To add empty space to bottom of the element*/ 
 
} 
 
#container #navigation { 
 
    margin-top: 5px; 
 
    background-color: #ADA9A0; 
 
    color: white; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    border: 2px solid #ADA9A0; 
 
} 
 
#container #content { 
 
    background-color: #D9D5CE; 
 
    min-height: 300px; 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
    /*To add empty space to bottom of the element*/ 
 
} 
 
#container #content #sidebar1 { 
 
    background-color: #ADA9A0; 
 
    float: left; 
 
    width: 25%; 
 
    min-height: 300px; 
 
    margin-bottom: 3px; 
 
} 
 
#container #content #column1 { 
 
    background-color: white; 
 
    min-height: 300px; 
 
    margin-bottom: 3px; 
 
    width: 50%; 
 
    float: left; 
 
    margin: 0; 
 
} 
 
#container #content #sidebar2 { 
 
    background-color: #ADA9A0; 
 
    float: right; 
 
    width: 25%; 
 
    min-height: 300px; 
 
    margin-bottom: 3px; 
 
} 
 
#container #footer { 
 
    padding-top: 1px; 
 
    border-top: 1px solid black; 
 
} 
 
.CR { 
 
    text-align: left; 
 
    position: fixed; 
 
} 
 
.Instructor h4 { 
 
    text-align: right; 
 
    position: fixed right; 
 
} 
 
/*NAV LINKS - add an "a" to style items under the ID'S*/ 
 

 
#container #navigation a { 
 
    color: white; 
 
    text-decoration: none; 
 
    /*gets rid of the underlining effect*/ 
 
    padding-top: 5px; 
 
    padding-bottom: 6px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 
/*To add a hover put a:hover*/ 
 

 
#container #navigation a:hover { 
 
    color: red; 
 
    background-color: white; 
 
} 
 
#container #content #left { 
 
    font-family: Arial; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 

 
    <link type="text/css" rel="stylesheet" href="HTML.CSS.css" /> 
 

 
    <title>My Portfolio</title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <div id="header"> 
 
     <h1> CIS 2336- Internet Applications </h1> 
 
     <h2> DeVoll </h2> 
 
    </div> 
 
    <div id="navigation"> 
 
     <a href="http://tdevoll16f.heyuhnem.com/index1.html/CIS 2336/My Portfolio/MyPage1.html">Home</a> 
 
     <a href="#">HTML/CSS</a> 
 
     <a href="#">PHP</a> 
 
    </div> 
 
    <div id="content"> 
 

 
     <div id="sidebar1"> 
 
     <h4> Instuctor: Natalia Fofanova </h4> 
 
     <ul> 
 
      <li>Lectures</li> 
 
      <li>Syllabus</li> 
 
      <li>Helpful Videos</li> 
 
     </ul> 
 
     </div> 
 

 
     <div id="column1"> 
 
     <h2> HTML and CSS </h2> 
 
     <p>HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for bulding a website. 
 
      <p> 
 

 
      <p>HTML provides a structure for the page by using "Hypertext" which refers to the hyperlinks that an HTML page may contain. Also, "Markup language" refers to the way tags are used to define the page layout and elements within the page.</p> 
 
      <p>CSS provides the visual layout of web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML. CSS helps Web developers create a uniform look across 
 
       several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document.</p> 
 
      </p> 
 
     </div> 
 

 
     <div id="sidebar2"> 
 
     <h4> Homework and Projects </h4> 
 
     <ul> 
 
      <li>Module 1</li> 
 
      <li>Module 2</li> 
 
      <li>Module 3</li> 
 
      <li>Welcome Button</li> 
 
      <li>2-column Webpage</li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 

 
    <footer> 
 
     <div id="footer"> 
 
     <div class="CR"> 
 
      <h4> Copyright 2016 </h4> 
 
     </div> 
 
     <div class="Instructor"> 
 
      <a href="http://heyuhnem.com/"><h4>Copyright Natalie Fofanova </h4> </a> 
 
     </div> 
 

 
    </footer> 
 

 
</body> 
 

 
</html>

來源

2016-09-22 Tasha

聲明一個行高的第二部分。

例

#second p { 
    line-height: 20px; 
}

http://www.w3schools.com/cssref/pr_dim_line-height.asp

來源

2016-09-22 04:10:29

p{ 
    text-align: justify; 
    text-align-last: left; 
    padding-left: 10px; 
    padding-right: 10px; 
}

添加到您的CSS希望它會工作

來源

2016-09-22 04:42:23 Shailesh

當你的代碼應該像下面的代碼更改：

#content ul{ 
    margin:0; 
    padding:0; 
    display:block; 
} 
#content ul li { 
    text-align: center; 
    padding: 0px; 
    list-style-type:none;/* if you really wants bullets remove this line*/ 
} 
* { 
    font-family: Melvetica; 
    margin: 0px; 
    padding: 0px; 
} 
body { 
    background-color: #6B6A67; 
    line-height:20px; 
} 
#column1 p{padding:4px;} 
.clearfix{clear:both;}

Ť o改變你的最小高度應該是min-height：320px;而不是300px。

你想在這個問題更清晰。請告訴我，我們會建議更多的觀點。

我會更新您的代碼jsfiddle。 Demo

來源

2016-09-22 04:57:58 bala

p{ 
padding: 0 0 10px 0; 
}

只是填充下來就可以把所有的段落

來源

2016-09-22 05:08:34

沒有'浸軋down'在CSS之間一定空間......你的意思是'pasding，bottom'？ – kukkuz

thnx爲指出錯誤！我的意思是填充：0 0 10px 0; –

無序和有序列表不對齊到列

回答

相關問題