0

Webページの上部に3つのアイテムがあります。左、中央、右に配置されることを期待しています。ただし、中央にあるのはバガーです（ゲームの後半に作成されたことが一因です）。運が悪かったので、オートマージンのトリックを試しました。私は相対的なポジショニングを試しましたが、完全に中央に配置することはできません（そしてそれはその隣人を利用します）。以下の完全なコードで、「showInMiddle」を中央に配置できますか？そのアイテムを表示するには、ログインボタンをクリックする必要があります。理想的には、ページが狭すぎる場合でもアイテムは折り返されますが、（互いに重ねたり、すべてを左側に描画するのではなく）配置を維持します。

<!DOCTYPE html>
<html>
<head>
    <title>This is dumb</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">

<header style="width: 100%">

<h4 id="showOnLeft" style="font-size: 1.1em; display: inline;">I'm the title</h4>

<span id="showInMiddle" data-bind="visible: LoggedIn">
    I'm supposed to be in the middle with my two buttons.
    <button>B1</button>
    <button>B2</button>
</span>

<div id="showOnRight" style="display: inline; float: right">
    <form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
        <input type="text" placeholder="Username" />
        <input type="password" placeholder="Password" />
        <input type="submit" value="Login" />
    </form>
    <form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
        <span>Howdy</span>
        <input type="submit" value="Logout" />
    </form>
</div>

<nav><hr/></nav>

</header>

<script type="text/javascript">

    function LoginViewModel() {
        var self = this;
        self.LoggedIn = ko.observable(false);
        self.login = function (formElement) { self.LoggedIn(true); };
        self.logout = function (formElement) { self.LoggedIn(false); };
    }

    ko.applyBindings(new LoginViewModel());

</script>

</body>
</html>
4

2 に答える 2

1

デフォルトでは幅がわからないインライン要素であるため、スパンを中央に配置することはできません。

次のように、spanをdivに置き換えることができます（インラインCSSをご覧ください）。

<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center ">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</div>

これは速いです-私は家に帰ります。ログインフォームが関係する幅を調整してみてください。floatdivの合計がcontainerの合計を超えてはならないことに注意する必要があります。超えない場合、問題が発生します。

<!DOCTYPE html>
<html>
    <head>
        <title>
            This is dumb
        </title>
        <style>
        #container {
            width:900px; 
            margin: auto 0; 
            overflow: auto;           

        }        
        .floatdiv {
            float:left;

            margin:0;                        

        }

        </style>        

    </head>  

    <body style="font-family: 'Segoe UI'; margin: 5px 20px;">
    <div id="container">

            <div class="floatdiv" style="font-size: 1.1em; width:200px">
                I'm the title                                                                
            </div>
            <div class="floatdiv" id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center; width:300px ">

                <button>
                    B1
                </button>
                <button>
                    B2
                </button>             
            </div>
            <div class="floatdiv" id="showOnRight" style="width:300px; float:right; text-align:right">
                <form id="someLoginForm" style="" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
                    <input type="text" placeholder="Username" />
                    <input type="password" placeholder="Password" />
                    <input type="submit" value="Login" />
                </form>
                <form id="someLogoutForm" style="" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
                    <span>
                        Howdy
                    </span>
                    <input type="submit" value="Logout" />
                </form>
            </div>

        </header>
  </div>        

    </body>

</html>
于 2012-05-18T23:18:06.920 に答える
0

テーブルを使用すると、これは問題なく機能することになります。誰かわかったね？

<!DOCTYPE html>
<html>
<head>
    <title>This is dumb</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>

    <style type="text/css">
        table, tr, td, h4, div { margin: 0px; padding: 0px; }
    </style>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">

<header style="width: 100%">

<table style="width: 100%; border-width: 0px;">
<tr>
<td><h4 id="showOnLeft" style="font-size: 1.1em;">I'm the title</h4></td>
<td>
<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align: center;">
    I'm supposed to be in the middle with my two buttons.
    <button>B1</button>
    <button>B2</button>
</div>
</td>
<td>
<div id="showOnRight" style="text-align: right;">
    <form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
        <input type="text" placeholder="Username" />
        <input type="password" placeholder="Password" />
        <input type="submit" value="Login" />
    </form>
    <form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
        <span>Howdy</span>
        <input type="submit" value="Logout" />
    </form>
</div>
</td>
</tr>
</table>

<nav><hr/></nav>

</header>

<script type="text/javascript">

    function LoginViewModel() {
        var self = this;
        self.LoggedIn = ko.observable(false);
        self.login = function (formElement) { self.LoggedIn(true); };
        self.logout = function (formElement) { self.LoggedIn(false); };
    }

    ko.applyBindings(new LoginViewModel());

</script>

</body>
</html>
于 2012-05-19T00:35:37.690 に答える