Question

需要帮助才能使文字浮动在<div>中的社交图标下方。尝试了float:right，display:block和text-align:right，但仍然没有运气。

CSS：

.footerLeft {
  float:left;
  width: 50%;
  height: 100px;
  color: #fff;
  background-color: #33383b;
}

.footerLeft p {
  margin-left: 25px;
}
.footerLeft img {
  width: 175px;
  height: 50px;
  padding-left: 25px;
  margin-top: 10px;

}
.footerRight {
  float:right;
  width: 50%;
  height: 100px;
  color: #fff;
  background-color: #33383b;
}
.footerRight img {
  width: 35px;
  height: 35px;
}
ul#menu li {
    display:inline;
    margin-right: 10px;
    float:right;
}
.footerRight p {
  text-align: center;
    display:inline-block;
  position:relative;
}

HTML：

<div class="footerLeft">
<img src="img/logo.png">
<p>Sharpturn Network&copy; 2016</p>
</div>
<div class="footerRight">
<ul id="menu">
  <li><img src="img/footer/facebook.png"></li>
  <li><img src="img/footer/twitter.png"></li>
  <li><img src="img/footer/youtube.png"></li>
</ul><br>
<p>Designed by <blank></p>
</div>

Answer 1

请参阅此fiddle

我在小提琴中做的是，删除CSS中的所有浮动并将它们更改为inline-block显示，这使得它们看起来像浮动元素，然后将它们对齐到右边，我用过text-align:right。

更新了CSS

ul#menu li {
  display: inline-block;
  margin-right: 10px;
  /* float:right; */
}

.footerRight p {
  text-align: right;
  position: relative;
}

ul#menu {
  text-align: right;
}

<强>更新

由于您编写了很多媒体查询，我建议您更改ul#menu li的CSS，如下所示

ul#menu li {
    display: inline-block;
    margin-right: 10px;
    float:none !important;
}

对齐div img下的文本

1 个答案:

请参阅此fiddle