Question

这是我的标题。

enter image description here

我的目标是将退出按钮移到最右边，而不会失去点击它们的能力。

现在，我尝试了相对位置和绝对位置，这会将按钮向右移动，但按钮不再可点击。

添加行位置：relative;到＃my-menus（使按钮不可点击）

我还尝试添加间隔符，或者使我的注销按钮更大但不起作用。无论我做什么，宽度都坚持到125px。（那些似乎不是有效的解决方案......）

按原样，按钮是可点击的。

我做错了什么？我更感兴趣的是为什么会发生这种情况然后如何解决它，因为我可以忍受目前的结果。此外，如果我完全使用所有div的错误方法，那么请告诉我。我想学习。

以下是html和css文件：

<body>
    <div id="header">
        <div id="title">
            <div>
                <img src="styles\monkey-head-pic-hi.png" alt="">
                RotoMonkey
            </div>
            <div id="userGreeting">
                <p>Welcome <%=session.getAttribute("name")%>!</p>
            </div>
        </div>
        <div id="my-menus">
            <div>
                <form method="get" action="homePageForm.jsp"> 
                    <input class="menuItem" type="submit" value="Home">
                </form>
            </div>
            <div>
                <form method="get" action="loginForm.jsp"> 
                    <input class="menuItem" type="submit" value="Members"> 
                </form>
            </div>
            <div>
                <form method="get" action="loginForm.jsp">
                    <input class="menuItem" type="submit" value="Player Stats">
                </form>
            </div>
            <div>
                <form method="get" action="loginForm.jsp">
                    <input class="menuItem" type="submit" value="Create League">
                </form>
            </div>
            <div>
                <form method="get" action="loginForm.jsp">
                    <input class="menuItem" type="submit" value="Join league">
                </form>
            </div>
            <div id="logout">       
                <form method="get" action="loginForm.jsp">
                    <input class="menuItem" type="submit" value="Logout">
                </form>
            </div>          
        </div>
    </div>
</body>

#header
{
    width:100%;
}

#header div
{
    width:1000px;
}

#title
{ 
    background-color:white;
    height:75px;
    color:Green;
    font-size: 40px;
}

#title div
{ 
    float:left; 
    width:500px;
    height:75px;
}

img
{
    max-width: 100%;
    max-height: 100%;
    margin:5px;
    vertical-align: middle;
}

#userGreeting
{
    position:relative;
    font-size: medium;  
}
#userGreeting p
{
    position:absolute;
    bottom:0;
    right:0;
    margin: 0;
    padding: 0;
    margin-right: 20px;
    margin-bottom:5px;
}

#my-menus
{
    background-color:green;
    overflow:hidden;
    width:1000px;
    height:auto;
    z-index:-2;
}

#my-menus div
{
    display:inline-block;
    height:auto;
    text-align:center;
    border-right:thin solid white;
    width:125px;
}

/* #logout */
/* { */
/*  position:absolute; */
/*  right:0; */
/* } */

body {
    width: 1000px;
    margin: 50px auto;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 
                inset 0px 1px 0px 0px rgba(250, 250, 250, 0.5);
}

input[type=submit] {
    border: green;
    background: transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 );
    color: #fff;
    padding: 5px 5px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
    z-index:-10;
}

Answer 1

这是你想要完成的吗？ Fiddle

我刚补充说：

#logout {
    float:right;
}

问题是，您的所有div元素都是inline-block，并且它们会内嵌堆叠。您的position: relative个按钮无法点击，因为#my-menus有z-index: -2并被#header元素覆盖。

Answer 2

您可以在css中使用此代码来正确对齐div

div{float:right;}

如何正确对齐包含另一个div中的表单的div？

2 个答案: