Question

我想创建一个“页脚”，就像在本页设计的第一列 - ＆gt; https://dribbble.com/shots/2262761-Mobile-Blog-App-Interface/attachments/424147

我在显示水平列表时遇到问题，我无法弄清楚为什么这些点位于div的底部。

我想为整个“页脚”创建一个大div，然后像这样设置3个div： 1）第一个div与文本CLOSE

2）第二个div有4个点和

3）最后一个div带有Font 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>

CSS

.footer-text {
float:left;
display:inline-block;
background-color: white;
padding: 10px 0px 10px 5px;
}
.dots{
background-color: white;
margin-top:0px;
float:left; 
padding-top: 0px;
padding-left:0px;

}

li {
display:inline;
font-size: 50px;
}

https://jsfiddle.net/q7cyu7sa/2/ - ＆gt;我的伪代码

Answer 1

您可以使用display: flex作为页脚区域，使用div列表span作为页面。跨度已经内联显示，您只需要集中内容。

<强> HTML：

<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>

<强> CSS：

.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;
      }

预览

Answer 2

正如bocanegra所说，你可以使用display：flex;在页脚容器上，并灵活增长以调整大小，这对于确定交互元素上的点击区域的大小非常有用。

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

值得注意的是，您可以在CSS中订购flex元素，这样您就可以明智地订购HTML。

这是一个例子。删除CSS中的第一个注释以查看边框以更好地了解大小。 https://codepen.io/fraig/pen/PKPNGK

Answer 3

使用bootstrap简单修复编辑您的代码：

https://plnkr.co/edit/LQSbZ0B6Upwf3UETfudm?p=preview

我认为上面的那个人无论如何都做了所有工作

 <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>

Answer 4

div和ul默认显示：block。在某些情况下更好使用span，即display：inline，以避免额外的编码。
向左或向右浮动会将元素移出父边框和位置，这就是你在第二行看到“ul”的原因，即使使用了display：inline-block。

https://jsfiddle.net/q7cyu7sa/9/

<强> HTML

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

<强> CSS

.footer {
  background-color:white;
 }
.footer-text {
  background-color: white;
  padding: 10px 0px 10px 5px;
  margin:0;
}    
.dots {
  display:inline;
  margin:0 10px;
  }      
li {
  display:inline;
  font-size: 50px; line-height:20px;
}    
li:nth-of-type(n+2) {
  color: lightgray;
}

另一种方式简化：https://jsfiddle.net/q7cyu7sa/12/

HTML

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

CSS：

.footer {
  background-color:white;
 }

.footer-text {
  background-color: white;
  padding: 10px 0px 10px 5px;
  margin:0;
}

dots {
  font-size: 50px; 
  line-height:20px;
  margin:0;
  color:black;
  }
dots:nth-of-type(n+2){
    color: lightgray;
  }

div与水平列表

4 个答案: