Question

我遇到类似这个的问题：

除了它提出的解决方案在我的情况下不起作用。我的HTML是：

<header class="masthead">
    <a class="navbar-brand" href="index.php"><img src="logo.png" alt="My Logo"></a>
    <div class="container-fluid">
        <div class="navbar-right" id="nav_derecha">
            <ul id="lang">
                <li><a href=""><img src="es.png" alt="Español"></a></li>
                <li><a href=""><img src="en.png" alt="English"></a></li>
                <li><a href=""><img src="fr.png" alt="Français"></a></li>
                <li><a href=""><img src="de.png" alt="Deutsch"></a></li>
            </ul>           
            <ul id="login_area">
                Login | Register
            </ul>
        </div>
    </div>          
</header>

我的CSS是：

header.masthead {
    background-color: #103961;
    height: 82px;
    margin-bottom: 0px;
    box-shadow: none;
}    
header.masthead nav {
    background: #339966;
    border: 0px;
    box-shadow: none;
    /* max-width: 1100px; */
    margin-left: auto;
    margin-right: auto;
}    
.navbar-brand > img {
    width: 270px;
}


@media only screen and ( min-width: 768px ) {
    #nav_derecha {
        position: relative;
        }
    #login_area {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

#login_area li a{
    color:white !important;  
}

#lang  li {
    display: inline;
    }

使用“position：absolute”技巧，登录/注册链接显示在语言栏的顶部。我希望语言栏显示在右上角，其下方的登录区域与标题的底部对齐。我怎么能这样做？

Answer 1

我觉得这样的事情就是你要找的东西：

.nav-holder{
   display:inline-block;   
   vertical-align:top;
}

#lang{
   -webkit-padding-start: 0; 
   margin:0;
}

http://jsfiddle.net/1w6xr92j/7/

需要将块元素作为内嵌块元素，以便它们并排放置。

另外，我看到webkit在默认情况下放入ul的一些填充，所以我把它关掉了。

垂直对齐顶部是我们所需要的所有链接以便坐在顶部。

编辑：相对定位您的标头，然后您的容器流体绝对会包含您想要的链接。然后，您还可以设置＆＃34;右键＆＃34;属性使容器远离你想要的右侧。

如果您想澄清其他任何事情，请告诉我。

Answer 2

我将CSS的两个部分更改为：

@media only screen and ( min-width: 768px ) {
    #nav_derecha {
        position: relative;
        }
    #login_area {
        position: absolute;
          text-align: right; /* used to say bottom:0; right: 0 -> you can remove this line too, if you wish */
    }
}

#login_area{ /* there is no li a  inside this ul, so I removed them from the css */
    color:white !important;  
}

<强> See updated bootply

Bootstrap：将元素对齐到底部不起作用

2 个答案: