Question

我有一个垂直导航菜单，旁边有一张图片。所以现在导航菜单和图片垂直对齐到顶部。我希望它在底部，例如，导航菜单在图像所在的同一点垂直完成。如何使用绝对定位来实现这一目标？

 <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Reviews</a></li>
 </ul>

 <img src="pic.jpg">

CSS：

 ul {
    float: left;
    text-align: right;
 }

 ul li {
    padding-top: 5px;
 }

 ul li a {
    background: yellow;
    display: inline-block;
    padding: 10px 35px;
    font-size: 20px;
 }

 img {
    width: 230px;
    height: auto;
    float: left;
 }

我不想使用绝对位置，因为图像应该与导航菜单相互连接（它应该是一个按钮来自他后面的人的png图片）所以如果有人在浏览器中使用不同的字体大小，我担心它可能会搞砸。

Answer 1

您可以使用display: table;来实现此目标。

为ul和img创建一个包装元素，并为其display: table;。 ul和img应该有display: table-cell; vertical-align: bottom;。如果你这样做，你就不需要float: left;或ul img。

演示：http://jsfiddle.net/xq6SY/

<强> HTML

<div class="wrapper">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Reviews</a>
        </li>
    </ul>
    <img src="pic.jpg">
</div>

<强> CSS

.wrapper {
    display: table;
}
ul {
    display: table-cell;
    text-align: right;
    vertical-align: bottom;
}
ul li {
    padding-top: 5px;
}
ul li a {
    background: yellow;
    display: inline-block;
    padding: 10px 35px;
    font-size: 20px;
}
img {
    width: 300px;
    height: auto;
    display: table-cell;
    vertical-align: bottom;
}

Answer 2

尝试此代码，即使我将其按到屏幕底部））DEMO

<div class="page-wrap">



</div>

<footer class="site-footer">
 <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Reviews</a></li>
 </ul>

 <img src="http://placehold.it/350x300">
</footer>


* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  /*height: 142px; */
}
.site-footer {
  background: white;
}
 ul {
    /*float: left;*/
    text-align: right;
   display:inline-block;
 }

 ul li {
    padding-top: 5px;
 }

 ul li a {
    background: yellow;
    display: inline-block;
    padding: 10px 35px;
    font-size: 20px;
 }

     img {
    width: 230px;
    height: auto;
    display:inline-block;
   vertical-align:bottom;
 }

Answer 3

你可以这样做：

fiddle

CSS

ul, img { display:inline-block; vertical-align:bottom;}

**重要：不要忘记删除你的花车，并添加填充：0;余量：0;到您的UL。（看小提琴）

如何在没有绝对定位的情况下将元素垂直对齐到另一个元素的底部？

3 个答案:

CSS