我的网页顶部有三个项目。我希望它们位于左侧,中间和右侧。然而,在中心的那个是一个bugger(部分是因为它是在游戏后期创建的)。我试过没有运气的汽车保证金技巧。我已经尝试过相对定位但不能完全居中(并且它吸引了它的邻居)。在下面的完整代码中,您可以将“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>
答案 0 :(得分:1)
您不能将范围居中,因为它是一个内联元素,默认情况下不知道它的宽度。
你可以简单地用这样的div替换span(观看内联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>
答案 1 :(得分: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>