个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 04:01:44 25 4
gpt4 key购买 nike

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

提前致谢。*请全屏显示 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>

最佳答案

这里是重写的代码: 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 并将它们 float 到右/左。对于中心图像，我将其放置在中心。

关于html - 为什么我的无序列表没有位于居中图像旁边？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43173773/

25 4 0
文章推荐： javascript - JavaScript 的非贪婪正则表达式
文章推荐： javascript - 存储 JQuery 变量的最佳方式？
文章推荐： javascript - react : pass value from parent to child does not work
文章推荐： c++ - 在 WM_COMMAND win32 GUI C++ 中处理 WM_LBUTTONDOWN 和 WM_LBUTTONUP
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com