Question

似乎我有一个PHP函数，只要我没有会话，它就会回显一个按钮（这是一个和img的混合）。这是在我的顶级菜单容器中添加的，这是一个div。我想将此按钮一直向右拉，并将其对齐在中间;但是，因为我使用float：right;它干扰了我的垂直菜单，使它有点向下留下间隙，这个菜单非常简单，因为它是从w3school教程我只做了一些小的改动，如添加一个i标签，以便从FontAwesome添加图标。这个垂直菜单不属于我的顶级菜单容器。

简而言之，我希望我的登录按钮一直向右添加，而不会干扰我的垂直菜单。

我也会接受并感谢更有经验的用户提供的一些提示！

＆＃13;

    body {
    margin: 0;
    background-image: url("../resources/bkg.png");
    background-repeat:no-repeat;
    background-size: 100%;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px;
    line-height: 200%;
}
.top-menu-container {
    display:inline-block;
    width: 100%;
    height: 70px;
    background-color: #FFF;
    margin: 0;
    padding:0;
}

#login{
    float:right;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
    background-color: #FFF;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
    text-align: center;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    font-family: 'Arial';
    font-weight: bold;

}
li a.withdrawal {
    color: #27ae60;
}

li a.logout {
    color: #27ae60;
}
li a.withdrawal {
    color: #27ae60;
}
li a.withdrawal {
    color: #27ae60;
}
/* Change the link color on hover */
li a:hover {
    background-color: #2c3e50;
    color: white;
}
li a:hover {
    background-color: #2c3e50;
    color: white;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="public/css/main.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
    <div class="top-menu-container">
    <div id="login">
        <a href='?login'><img src='https://war-lords.net/images/wl/signin_steam.png' style='width:160px;height='60px'></a>
    </div>

    </div>
    <div class="vertical-menu-container">
        <ul>
            <li><a class="jackpot" href="#">Jackpot</a></li>
            <li><a class="withdrawal" href="#"><i class="fa fa-bolt" style="font-size: 20px;color:#27ae60"></i>  Deposit</a></li>
            <li><a class="support" href="#">Support</a></li>
            <li><a class='logout' href='?logout'><i class='fa fa-wrench' style='font-size: 20px;color:#27ae60'></i>  Log out</a></li>
        </ul>
    </div>
</body>
</html>

＆＃13;

Answer 1

尝试display:right;而不是float:right;

Answer 2

我找到了一种愚蠢的解决方案，但它的工作原理是将top-menu-container div放在vertical-menu-container div之前，因为vertical-menu-container占据了窗口的整个宽度，这就是为什么存在差距这是结果

Answer 3

您的垂直菜单<ul>目前已应用position: fixed。这意味着当页面滚动或移动时，它总是会保持在该位置。

因此，您可以对其应用一些绝对定位。如果您将top: 0;添加到<ul>元素，它会将自己附加到最顶层的页面。

<ul>元素的完整CSS将如下所示：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 10%;
    background-color: #FFF;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
    text-align: center;
    top: 0;
}

顺便说一下，你可能想检查你的CSS。你有一些重复的标签（两个<ul>）和一些其他无效或不需要的属性。

CSS无法对齐按钮

3 个答案: