Html 带水平列表的div

我想在本页设计的第一列创建一个“页脚”->

我在显示水平列表时遇到问题，我不明白为什么这些点位于div的底部

我想为整个“页脚”做一个大div，然后像这样做3个div： 1） 带文本关闭的第一个div

2） 第二个div，带4个点和

3） 最后一个div中有一些来自字体Awesome的图标

显示这4点有什么不对？我是否应该尝试与无序列表不同的显示方式

HTML:

<div class="footer">
<div class="footer-text">CLOSE</div>
<ul class="dots">
<li>.</li>
<li class="dot">.</li>
<li class="dot">.</li>
<li class="dot">.</li>
</ul>
</div>
</div>

<div class="item">

  <div class="image">
    Image
  </div>

  <div class="footer">  
    <div>
      Close
    </div>

    <div class="dots">
      <span>.</span>
      <span>.</span>
      <span>.</span>
      <span>.</span>      
    </div>

    <div>
      Comments
    </div>
  </div>

</div>

.item {
  width: 300px;
  border: 1px solid black;
}

  .item .image {
    height: 400px;
    background-color: #ccc;
    padding: 10px;
  }

  .item .footer {
    height: 50px;
    background-color: #ddd;
    display: flex;
  }

    .item .footer > div{
      flex: 1;
      border: 1px solid blue;
      background-color: #eee;
      padding: 10px;
    }

    .item .footer .dots {
      text-align: center;
    }

      .item .footer .dots > span {
        font-size: 50px;
        line-height: 0px;
      }

---

->my pseudocode

您可以对页脚区域使用

display:flex

，对点使用带有

span

列表的

div

。跨距已经内联显示，您只需要集中内容

HTML:

<div class="footer">
<div class="footer-text">CLOSE</div>
<ul class="dots">
<li>.</li>
<li class="dot">.</li>
<li class="dot">.</li>
<li class="dot">.</li>
</ul>
</div>
</div>

<div class="item">

  <div class="image">
    Image
  </div>

  <div class="footer">  
    <div>
      Close
    </div>

    <div class="dots">
      <span>.</span>
      <span>.</span>
      <span>.</span>
      <span>.</span>      
    </div>

    <div>
      Comments
    </div>
  </div>

</div>

.item {
  width: 300px;
  border: 1px solid black;
}

  .item .image {
    height: 400px;
    background-color: #ccc;
    padding: 10px;
  }

  .item .footer {
    height: 50px;
    background-color: #ddd;
    display: flex;
  }

    .item .footer > div{
      flex: 1;
      border: 1px solid blue;
      background-color: #eee;
      padding: 10px;
    }

    .item .footer .dots {
      text-align: center;
    }

      .item .footer .dots > span {
        font-size: 50px;
        line-height: 0px;
      }

预览：

<div class="footer">
<div class="footer-text">CLOSE</div>
<ul class="dots">
<li>.</li>
<li class="dot">.</li>
<li class="dot">.</li>
<li class="dot">.</li>
</ul>
</div>
</div>

<div class="item">

  <div class="image">
    Image
  </div>

  <div class="footer">  
    <div>
      Close
    </div>

    <div class="dots">
      <span>.</span>
      <span>.</span>
      <span>.</span>
      <span>.</span>      
    </div>

    <div>
      Comments
    </div>
  </div>

</div>

.item {
  width: 300px;
  border: 1px solid black;
}

  .item .image {
    height: 400px;
    background-color: #ccc;
    padding: 10px;
  }

  .item .footer {
    height: 50px;
    background-color: #ddd;
    display: flex;
  }

    .item .footer > div{
      flex: 1;
      border: 1px solid blue;
      background-color: #eee;
      padding: 10px;
    }

    .item .footer .dots {
      text-align: center;
    }

      .item .footer .dots > span {
        font-size: 50px;
        line-height: 0px;
      }

---

您可以对页脚区域使用

display:flex

，对点使用带有

span

列表的

div

。跨距已经内联显示，您只需要集中内容

HTML:

<div class="footer">
<div class="footer-text">CLOSE</div>
<ul class="dots">
<li>.</li>
<li class="dot">.</li>
<li class="dot">.</li>
<li class="dot">.</li>
</ul>
</div>
</div>

<div class="item">

  <div class="image">
    Image
  </div>

  <div class="footer">  
    <div>
      Close
    </div>

    <div class="dots">
      <span>.</span>
      <span>.</span>
      <span>.</span>
      <span>.</span>      
    </div>

    <div>
      Comments
    </div>
  </div>

</div>

.item {
  width: 300px;
  border: 1px solid black;
}

  .item .image {
    height: 400px;
    background-color: #ccc;
    padding: 10px;
  }

  .item .footer {
    height: 50px;
    background-color: #ddd;
    display: flex;
  }

    .item .footer > div{
      flex: 1;
      border: 1px solid blue;
      background-color: #eee;
      padding: 10px;
    }

    .item .footer .dots {
      text-align: center;
    }

      .item .footer .dots > span {
        font-size: 50px;
        line-height: 0px;
      }

预览：

<div class="footer">
<div class="footer-text">CLOSE</div>
<ul class="dots">
<li>.</li>
<li class="dot">.</li>
<li class="dot">.</li>
<li class="dot">.</li>
</ul>
</div>
</div>

<div class="item">

  <div class="image">
    Image
  </div>

  <div class="footer">  
    <div>
      Close
    </div>

    <div class="dots">
      <span>.</span>
      <span>.</span>
      <span>.</span>
      <span>.</span>      
    </div>

    <div>
      Comments
    </div>
  </div>

</div>

.item {
  width: 300px;
  border: 1px solid black;
}

  .item .image {
    height: 400px;
    background-color: #ccc;
    padding: 10px;
  }

  .item .footer {
    height: 50px;
    background-color: #ddd;
    display: flex;
  }

    .item .footer > div{
      flex: 1;
      border: 1px solid blue;
      background-color: #eee;
      padding: 10px;
    }

    .item .footer .dots {
      text-align: center;
    }

      .item .footer .dots > span {
        font-size: 50px;
        line-height: 0px;
      }

---

使用引导简单修复程序编辑代码：

我想上面的那个家伙做了所有的工作

 <div class="container">
    <div class="center one col-xs-4">
      <h2>CLOSE</h2>
    </div>
      <div class="center one col-xs-4">
      <ul>
        <li><a>.</a></li>
         <li><a>.</a></li>
          <li><a>.</a></li>
      </ul>
    </div>
      <div class="center one col-xs-4">
      <h2>IMAGE</h2>
    </div>
</div>

关





形象

使用引导简单修复程序编辑代码：

我想上面的那个家伙做了所有的工作

 <div class="container">
    <div class="center one col-xs-4">
      <h2>CLOSE</h2>
    </div>
      <div class="center one col-xs-4">
      <ul>
        <li><a>.</a></li>
         <li><a>.</a></li>
          <li><a>.</a></li>
      </ul>
    </div>
      <div class="center one col-xs-4">
      <h2>IMAGE</h2>
    </div>
</div>

关





形象

正如bocanegra所说，您可以使用display:flex；和flex grow来调整大小，这对于调整交互元素上的点击区域的大小非常有用

.container {
  display: flex;
}
.navigation {
  text-align: center;
}
.comment {
  text-align: right;
}

还值得注意的是，您可以在CSS中订购flex元素，这允许您明智地订购HTML

这里有一个例子。删除CSS中的第一条注释以查看边框，以便更好地了解大小。

---

正如bocanegra所说，您可以使用display:flex；和flex grow来调整大小，这对于调整交互元素上的点击区域的大小非常有用

.container {
  display: flex;
}
.navigation {
  text-align: center;
}
.comment {
  text-align: right;
}

还值得注意的是，您可以在CSS中订购flex元素，这允许您明智地订购HTML

这里有一个例子。删除CSS中的第一条注释以查看边框，以便更好地了解大小。

默认情况下，div和ul为显示：块。在某些情况下，最好 使用span，即display:inline，以避免额外的编码

向左或向右浮动将使元素脱离父边框 和位置，这就是为什么你在第二行看到“ul”， 即使使用了显示：内联块

HTML

<div class="footer">
    <span class="footer-text">CLOSE</span>
    <ul class="dots">
        <li>.</li>
        <li>.</li>
        <li>.</li>
        <li>.</li>
    </ul>    
</div>

另一种方式简化：

HTML

默认情况下，div和ul为显示：块。在某些情况下，最好 使用span，即display:inline，以避免额外的编码

向左或向右浮动将使元素脱离父边框 和位置，这就是为什么你在第二行看到“ul”， 即使使用了显示：内联块

HTML

<div class="footer">
    <span class="footer-text">CLOSE</span>
    <ul class="dots">
        <li>.</li>
        <li>.</li>
        <li>.</li>
        <li>.</li>
    </ul>    
</div>

另一种方式简化：

HTML

---

---

你能分享你的代码来帮助你更好的确定你想要什么吗。这4个点似乎随着页面的变化而变化，但您所说的似乎是“静态”的4个点。如果圆点随页面变化，这将使用javascripti。我只想用代码从dribble中打开此设计。张贴您尝试使用此圆点创建此设计的代码应为静态的，我想使其仅在HTML和CSScan中显示。您可以共享代码以帮助您更好地确定您想要什么。这4个点似乎随着页面的变化而变化，但您所说的似乎是“静态”的4个点。如果点随页面变化，这将使用javascripti。我只想用代码从dribble中打开此设计。发布您尝试使用此点创建此设计的代码应该是静态的，我只想在HTML和CSSyeah中使用此分区很好，但是，当我试图把无序的列表放在里面，使这些点成为点时，我遇到了问题，我想我得到了问题@amazintesla。您可以在“点”部分使用带跨距的div，并应用

text align:center

。跨距以内联方式显示，您只需集中内容。你可以在上面的代码中看到我所做的更改。是的，使用列表来完成这项任务相当棘手。我一定要读关于“flexbox”的书。是的，这个除法很好，但是当我试图把无序的列表放在里面去做这些点的时候，我遇到了问题，我想我得到了问题@amazintesla。您可以在“点”部分使用带跨距的div，并应用

text align:center

。跨距以内联方式显示，您只需集中内容。你可以在上面的代码中看到我所做的更改。是的，使用列表来完成这项任务相当棘手。我一定要读“flexbox”。你也可以使用flexbox，但要学会如何使用它。因此，您建议在这种情况下使用span比使用list更好？我的意思是使用span而不是div。如果我不清楚，很抱歉。那么可以在span中创建列表吗或者你的意思是每个点都应该在span内？不。你在div中使用了单词“close”，然后你让它显示：inline block，而不是只使用close。这就是我的意思。你写了这个列表，好的，我只修改了添加了：n个颜色类型，而不是为每个灰点添加“灰色”类：）你也可以使用flexbox，但要学会如何使用它。因此，您建议在这种情况下使用span比使用list更好？我的意思是使用span而不是div。如果我不清楚，很抱歉。那么可以在span中创建列表吗或者你的意思是每个点都应该在span内？不。你在div中使用了单词“close”，然后你让它显示：inline block，而不是u