0

これは私のヘッダーです。

ここに画像の説明を入力してください

私の目標は、ログアウトボタンをクリックする機能を失うことなく、ログアウトボタンを右端に移動することです。

今、私は相対的および絶対的な位置を試しました、そしてこれはボタンを右に動かします、しかしそれからボタンはもはやクリック可能ではありません。

  • 行位置の追加：相対; to＃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;
}
4

2 に答える 2

3

それはあなたが完了しようとしていることですか？フィドル

追加しました：

#logout {
    float:right;
}

問題は、すべてのdiv要素がinline-blockインラインでスタックし続けることです。要素によってオーバーレイされているposition: relativeため、作成したボタンはクリックできません。#my-menusz-index: -2#header

于 2013-03-24T19:11:40.947 に答える
2

このコードをcssで使用して、divを右揃えにすることができます

div{float:right;}
于 2013-03-24T19:11:40.800 に答える