我试图将我的两个列表放在每一侧居中的图像旁边，但这两个列表必须居中，而不是一直向右或向左。
提前致谢。 *请全屏显示html代码段。
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;
}<!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>
答案 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，并将它们浮动到右侧/左侧。对于中心图像，我将它放在中心。