我的页脚不会垂直对齐

时间:2017-05-09 17:35:05

标签: html css bootstrap-4

我正在尝试让我的li元素保持在同一条线上,但它们不会(它们是水平对齐但是就是这样)

代码如下:

<footer>
    <div class="container">
      <div id="coisas"
      class="col-6">
        <div class="row">
          <ul class="col-6">
            <li class="col-1"><img src="icon-behance.png"></li>
            <li class="col-1"><img src="icon-behance.png"></li>
            <li class="col-1"><img src="icon-behance.png"></li>
          </ul>
        </div>
      <div id="nothing"
      class="col-6">
      </div>
    </div>
  </footer>

这是CSS:

#coisas {
  float: right;
  bottom: 0;
  position: absolute;
  size: 50%;
  left: 0;
  padding-left: 5%;
  padding-right: 5%;
}
#nothing {
  size: 50%;
  right: 0;
}

4 个答案:

答案 0 :(得分:1)

要达到预期效果,请使用以下选项

#coisas ul li{
  display:inline;
}

Codepen- https://codepen.io/nagasai/pen/vmdYNg

答案 1 :(得分:0)

float属性指定框(元素)是否应该浮动。 如果你将li元素向左浮动,它们将在同一行中排列。所以如果将它们放在一行上,你可以使用它:

#coisas ul li{
list-style-type:none;
float:left;
}

list-style-type:none;属性仅用于删除列表项的项目符号。

您可以在此处详细了解css float属性:https://www.w3schools.com/cssref/pr_class_float.asp

答案 2 :(得分:0)

尝试了你的问题,现在就解决了,你可以在这里查看!

#coisas ul li{
  display:inline;
}

Demo

答案 3 :(得分:0)

我不确定你要做什么,但Bootstrap col应始终位于row内..

<footer>
    <div class="container">
        <div class="row">
            <div id="coisas" class="col-6">
                <ul class="row list-unstyled">
                    <li class="col-1"><img src="//placehold.it/40"></li>
                    <li class="col-1"><img src="//placehold.it/40"></li>
                    <li class="col-1"><img src="//placehold.it/40"></li>
                </ul>
                <div id="nothing" class="col-6">
                </div>
            </div>
        </div>
    </div>
</footer>

http://codeply.com/go/ArVyBK4VU5