0

我的网页顶部有三个项目。我希望它们位于左侧、中间和右侧。然而，中间的那个是个混蛋（部分是因为它是在游戏后期创建的）。我已经尝试了自动保证金技巧，但没有运气。我已经尝试过相对定位，但不能让它完全居中（它会利用它的邻居）。在下面的完整代码中，你可以让“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 的总数永远不能超过容器的总数，否则会出错。

<!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 回答