Question

我正在尝试创建一个3列网页。我的无序和有序列表的项目符号未与列中的相应文本对齐。此外，对于我的中间栏，文字是一起拼凑的。如何将段落分开？

＆＃13;

* {
  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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

向第2部分声明行高。

实施例

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

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

Answer 2

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

将此添加到您的CSS希望它能够正常工作

Answer 3

因为您的代码应该像下面的代码一样改变：

#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;}

要改变你的最小高度应该是min-height：320px;而不是300px。

您希望在此问题中更加清晰。请告诉我，我们会提出更多要点。

我将更新您的代码jsfiddle。 Demo

Answer 4

p{
padding: 0 0 10px 0;
}

填充下来会确保所有段落之间的空间

无序和有序列表未与列对齐

4 个答案: