为什么我的无序列表没有位于居中图像旁边？

时间：2017-04-02 21:33:46

标签： html css

我试图将我的两个列表放在每一侧居中的图像旁边，但这两个列表必须居中，而不是一直向右或向左。

提前致谢。 *请全屏显示html代码段。

＆＃13;
＆＃13; 
div.main p {
  color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

div.main h1 {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  font-size: 36px;
}

div.material {
  float: left;
}

div.material h2 {
  color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: underline;
}

div.list li {
  color: white;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  list-style-type: none;
}

div.materialy {
  float: right;
}

div.materialy h2 {
  color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: underline;
}

div.listy li {
  color: white;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: none;
  text-align: right;
}

div.method p {
  color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  text-decoration: underline;
  font-weight: bold;
}

div.method li {
  color: white;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  list-style-type: none;
  line-height: 40px;
}

div.skill li {
  font-weight: bold;
  font-style: italic;
  font-size: 18px;
}

div.skill p {
  font-style: italic;
  text-decoration: none;
  font-size: 16px;
  color: #F00;
}

div.image img {
  display: block;
  margin: 0 auto;
}

body {
  background-color: blue;
}

div.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font: Arial, Helvetica, sans-serif black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  border-radius: 5px;
  border-bottom: solid black;
  border-top: solid black;
  border-left: solid black;
  border-right: solid black;
  background: #09F;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#09F, #9FF);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#09F, #9FF);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#09F, #9FF);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#09F, #9FF);
  /* Standard syntax (must be last) */
}

div.nav li {
  float: left;
}

div.nav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

div.nav li a:hover {
  background-color: #0FC;
}
＆＃13; 
<!DOCTYPE html>
<html>
<link href="style4.css" type="text/css" rel="stylesheet" />

<head>
  <title>Tips</title>
</head>
<div class="nav">
  <ul>
    <li><a href="home.html">Home</a>
    </li>
    <li><a href="">Tips</a>
    </li>
    <li><a href="index.html">Learn</a>
    </li>
    <li><a href="contacts.html">Contact</a>
    </li>
  </ul>
</div>

<body>
  <div class="main">
    <h1>Welcome to the tips page!</h1>
    <p>
      <br>Artists typically use great techniques to make their art more professional looking and it also helps them improve their skills at drawing.
      <br>They use different types of mediums, tools, and art supplies to enhance the looks of their artwork.</p>
  </div>
  <div class="material">
    <h2>Materials for a beginner or newbie:</h2>
  </div>
  <div class="image">
    </br>
    </br>
    </br>
    <div class="list">
      <ul>
        <li>HB #2 Pencil</li>
        <li>Clean white vinyl eraser</li>
        <li>White printer paper</li>
        <li>Good lighting or desk lamp</li>
      </ul>
    </div>
    <img src="person-drawing.jpg" height="296" width="395"></div>
  <div class="materialy">
    <h2>Materials for the advanced:</h2>
    <div class="listy">
      <ul>
        <li>Staedtler Design/Drafting Pencil Set</li>
        <li>Clean white vinyl eraser</li>
        <li>Gum eraser</li>
        <li>Kneaded eraser</li>
        <li>White printer paper</li>
        <li>Good lighting or desk lamp</li>
        <li>Blending sticks</li>
        <li>0.5/0.7 mechanical pencils</li>
        <li>0.5/0.7 mechanical pencil lead</li>
        <li>Fine tip liner marker</li>
        <li>Adjustable drafting table</li>
      </ul>
    </div>
  </div>
  </br>
  <div class="method">
    <p>Here are some good methods and techniques to practice drawing skills:</p>
    <ul>
      <div class="skill">
        <li>Drawing is a skill</li>
        <p>*Drawing isn't some magical activity that people are born with! It can be taught and learnt from also, anyone can be skilled at drawing!</p>
      </div>
      <li>Drawing or sketching lightly</li>
      <li>Observe your artwork while drawing regularly</li>
      <li>Look for basic shapes</li>
      <li>Take your time</li>
      <li>Use guidelines/structure to form the foundation of the drawing</li>
      <li>Use resources if needed</li>
      <li>Be consistent</li>
      <li>Relax and have fun</li>
      <li>Keep practicing constantly</li>
    </ul>
  </div>
</body>

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

2 个答案:

答案 0 :(得分：0)

首先，您必须将所有DIV标记放在BODY中。然后你必须清理一下你的DIV。为了不重写整个HTML代码，我建议你使用表格列表：

<!DOCTYPE html>
<html>
<link href="style4.css" type="text/css" rel="stylesheet" />

<head>
  <title>Tips</title>
</head>


<body>

    <div class="nav">
      <ul>
        <li><a href="home.html">Home</a>
        </li>
        <li><a href="">Tips</a>
        </li>
        <li><a href="index.html">Learn</a>
        </li>
        <li><a href="contacts.html">Contact</a>
        </li>
      </ul>
    </div>

  <div class="main">
    <h1>Welcome to the tips page!</h1>
    <p>
      <br>Artists typically use great techniques to make their art more professional looking and it also helps them improve their skills at drawing.
      <br>They use different types of mediums, tools, and art supplies to enhance the looks of their artwork.</p>
  </div>

  <table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
  <td align="center" width="33%">
    <div class="material">
        <h2>Materials for a beginner or newbie:</h2>
    </div>
    <div class="list">
        <ul>
        <li>HB #2 Pencil</li>
        <li>Clean white vinyl eraser</li>
        <li>White printer paper</li>
        <li>Good lighting or desk lamp</li>
        </ul>
    </div>
  </td>
   <td align="center" width="33%">
    <div class="image">
        </br>
        </br>
        </br>
        <img src="person-drawing.jpg" height="296" width="395">
    </div>  
  </td> 
   <td align="center" width="33%">
      <div class="materialy">
        <h2>Materials for the advanced:</h2>
        <div class="listy">
          <ul>
            <li>Staedtler Design/Drafting Pencil Set</li>
            <li>Clean white vinyl eraser</li>
            <li>Gum eraser</li>
            <li>Kneaded eraser</li>
            <li>White printer paper</li>
            <li>Good lighting or desk lamp</li>
            <li>Blending sticks</li>
            <li>0.5/0.7 mechanical pencils</li>
            <li>0.5/0.7 mechanical pencil lead</li>
            <li>Fine tip liner marker</li>
            <li>Adjustable drafting table</li>
          </ul>
        </div>
      </div>
  </td> 
  </tr>
  </table>

  </br>
  <div class="method">
    <p>Here are some good methods and techniques to practice drawing skills:</p>
    <ul>
      <div class="skill">
        <li>Drawing is a skill</li>
        <p>*Drawing isn't some magical activity that people are born with! It can be taught and learnt from also, anyone can be skilled at drawing!</p>
      </div>
      <li>Drawing or sketching lightly</li>
      <li>Observe your artwork while drawing regularly</li>
      <li>Look for basic shapes</li>
      <li>Take your time</li>
      <li>Use guidelines/structure to form the foundation of the drawing</li>
      <li>Use resources if needed</li>
      <li>Be consistent</li>
      <li>Relax and have fun</li>
      <li>Keep practicing constantly</li>
    </ul>
  </div>
</body>

</html>

答案 1 :(得分：0)

这是重写的代码：      https://jsfiddle.net/vsjka9r7/ 

<div class="nav">
<ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="">Tips</a></li>
    <li><a href="index.html">Learn</a></li>
    <li><a href="contacts.html">Contact</a></li>
</ul>
</div>
<div class="main">
<h1>Welcome to the tips page!</h1>
<p><br>
    Artists typically use great techniques to make their art more professional looking and it also helps them improve their skills at drawing.
<br>
    They use different types of mediums, tools, and art supplies to enhance the looks of their artwork.
</p>
</div>
<div class="centerContentController">
<div class="leftList">
    <div class="material">
        <h2>Materials for a beginner or newbie:</h2>
    </div>
    <br>
    <br>
    <br>
    <div class="list">
        <ul>
            <li>HB #2 Pencil</li>
            <li>Clean white vinyl eraser</li>
            <li>White printer paper</li>
            <li>Good lighting or desk lamp</li>
        </ul>
    </div>
</div>
<img src="person-drawing.jpg" height="296" width="395" class="materialsImg">
 <div class="rightList">
    <div class="materialy">
        <h2>Materials for the advanced:</h2>
            <div class="listy">
                <ul>
                    <li>Staedtler Design/Drafting Pencil Set</li>
                    <li>Clean white vinyl eraser</li>
                    <li>Gum eraser</li>
                    <li>Kneaded eraser</li>
                    <li>White printer paper</li>
                    <li>Good lighting or desk lamp</li>
                    <li>Blending sticks</li>
                    <li>0.5/0.7 mechanical pencils</li>
                    <li>0.5/0.7 mechanical pencil lead</li>
                    <li>Fine tip liner marker</li>
                    <li>Adjustable drafting table</li>
                </ul>
            </div>
    </div>
    <br>
 </div>
 </div>
 <div class="bottomContent">
<div class="method">
    <p>Here are some good methods and techniques to practice drawing skills:
</p>
        <ul>
          <div class="skill">
              <li>Drawing is a skill</li>
              <p>*Drawing isn't some magical activity that people are born with! It can be taught and learnt from also, anyone can be skilled at drawing!</p>
          </div>
          <li>Drawing or sketching lightly</li>
          <li>Observe your artwork while drawing regularly</li>
          <li>Look for basic shapes</li>
          <li>Take your time</li>
          <li>Use guidelines/structure to form the foundation of the drawing</li>
          <li>Use resources if needed</li>
          <li>Be consistent</li>
          <li>Relax and have fun</li>
          <li>Keep practicing constantly</li>
        </ul>
</div>

这对你有用吗？ 如果不是我来这里帮忙:)。

我改变了什么： 我只是创建了一个div容器来包含图像和两个无序列表。 然后，我为每个无序列表创建了一个div，并将它们浮动到右侧/左侧。对于中心图像，我将它放在中心。

相关问题
最新问题