Question

我无法弄清楚如何在HTML / CSS中定位项目，因为在编码时我几乎是个新手。但我想在不付费的情况下自己做这件事。

基本上，我想创建一个3列宽度＆＃34;它是如何工作的＆＃34;每列有3个元素（类？）。图标，标题和副标题。

看起来像这样：https://www.screencast.com/t/KAKYgJQYVLS

有人能指出我只是让标题在彼此之上并且每个子弹点彼此相邻吗？

TIA！

Answer 1

使用<ul>和<li>

＆＃13;

ul {
  display: flex;
}

＆＃13;

<ul>
  <li>1. Heading 2 lines of text</li>
  <li>2. Heading 2 lines of text</li>
  <li>3. Heading 2 lines of text</li>
</ul>

＆＃13;

Answer 2

你可以尝试这个。如果您希望这些子弹更大，您应该使用图像或其他任何东西来替换它们。

* {
  margin: 0;
}

ul {
  display: flex;
  list-style-image: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/sign-check-icon.png');
}

ul li {
  margin: 20px;
}

<ul>
  <li>
    <h3>1. Heading</h3> 
    two lines of text
  </li>
  <li>
    <h3>2. Heading</h3> 
    two lines of text
  </li>
  <li>
     <h3>3. Heading</h3> 
     two lines of text
  </li>
</ul>

Answer 3

您可以使用bootstrap

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

Answer 4

如果你开始我会看一下像Bootstrap这样的框架，它会使这些东西变得更容易，并且有很好的例子来说明事情。

http://getbootstrap.com/

<div class="container">

 <div class="row">
   <div class="col-sm-4 text-center">
     <h3>
       heading 1
     </h3>
     <p>
     sub heading
     </p>
   </div>
   <div class="col-sm-4 text-center">
   <h3>
       heading 2
     </h3>
     <p>
     sub heading
     </p>
   </div>
   <div class="col-sm-4 text-center">
   <h3>
       heading 3
     </h3>
     <p>
     sub heading
     </p>
   </div>
 </div>


</div>

https://jsfiddle.net/vo1npqdx/475/

Answer 5

您可能希望使用以下HTML和CSS进行调整。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
    margin:0px;
    padding:0px;
}
.wrapper {
    width:100%;
    float:left;
}
.center {
    float:none;
    margin:0px auto;
    width:600px;
}
.content {
    float:left;
    width:100%;
}
.col-3 {
    width:33%;
    float:left;
}
.col-3 p {
    text-align: justify;
    padding: 5px;
}
.cell {
    width: 100%;
    float:left;
}
.rounded-icon {
    width: 16px;
    height: 16px;
    border: 1px solid #a84909;
    border-radius: 50%;
    float:left;
    margin-right: 5px;
    margin-top: 4px;
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="center">
    <div class="content">
      <div class="col-3">
        <div class="cell">
          <h3><div class="rounded-icon"></div>Heading 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lectus felis, tristique...</p>
        </div>
      </div>
      <div class="col-3">
        <div class="cell">
          <h3><div class="rounded-icon"></div>Heading 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lectus felis, tristique...</p>
        </div>
      </div>
      <div class="col-3">
        <div class="cell">
          <h3><div class="rounded-icon"></div>Heading 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lectus felis, tristique...</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

</html>

如何在HTML / CSS中为我的网站创建项目符号？

5 个答案: