0

質問

マウスオーバー時に loginForm ドロップダウンを作成しようとしています。フォームは miniLoginForm div の左上からドロップし、画面からドロップします。miniLoginForm div の右上からドロップダウンするにはどうすればよいですか?

HTML

    <li id="login"><?=anchor('users/login', 'Login')?>
        <div id="miniLoginForm">
            <?=form_open('users/login')?>
            <p>Username: <?=form_input('username')?></p>
            <p>Password: <?=form_password('password')?></p>
            <p><?=form_submit('Login', 'Login')?></p>
            <?=form_close()?>
            <p>New User? <?=anchor('users/register', 'Click here')?></p>
        </div>            
    </li>

CSS

#miniLoginForm {
    margin: auto auto;
    display: block;
    border: 1px solid black;
    width: 250px;
    position: absolute;
}

nav {
    width: 99%;
    margin: 0 auto;
    overflow:hidden;
    text-align: center;
    padding: 4px;
    border: 2px solid black;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin: 0 6px 0 3px;
}
4

2 に答える 2

2

li 要素を右にフロートさせる必要があります (右側にボックスとアンカーが必要な場合)。また、相対位置を設定する必要があります。

要素:

float: right;
position: relative;

ボックス要素

right: 0

この例をチェックして、問題を解決する方法を確認してください: http://jsfiddle.net/bnXbC/

于 2013-05-19T03:48:29.117 に答える
1

私がよく理解していれば、logginクラスを持つliの右上隅からログインフォームをドロップしたいと思うでしょう。フォローしてみてください

.login { 位置: 相対; width : 幅 px; }

miniLoginForm { 位置 : 絶対; 右：0; }

于 2013-05-19T03:37:17.237 に答える