如何獲得標題和兩個按鈕以與邊框正確對齊？
[英]How do I get a header and two buttons to align properly to a border?
問題描述
我是編碼的新手，我和一個朋友正在嘗試將一個網站放在一起，對於網站的標題，我遇到了一些問題，使標題與邊界對齊。 我使用float:right使兩個按鈕都與頁面的右側對齊。 那時他們有點卡在邊界中間，我被卡住了。 我試圖用 將它們彼此分開，但設法將它們都放在邊框上，但是現在標題在邊框上方高高漂浮，我希望它與按鈕和邊框平行放置。 這是我的代碼：
h1 { border-bottom: 5px solid white; border-bottom-style: ridge; } h1 { font-family: Helvetica; font-weight: bolder; } #login { background-color: white; color: black; font-family: Helvetica; font-weight: bold; float: right; font-size: 20px; border: 1px solid #000000; } #register { background-color: white; color: black; font-family: Helvetica; font-weight: bold; float: right; font-size: 20px; border: 1px solid #000000; }
<h1>Title <form method="post"> <input name="login" type="submit" value="Login" id="login">   <input name="register" type="submit" value="Register" id="register"></h1>
是否有可能使這三個要素坐在邊界上？
2 個解決方案
解決方案1
0 2016-11-11 23:33:55
將id名稱#form添加到表單標簽和樣式，如下所示
#form{
display:inline-block;
float:right;
}
下面的代碼段
<html> <head> </head> <style> h1 { border-bottom: 5px solid white; border-bottom-style: ridge; } h1 { font-family: Helvetica; font-weight: bolder; } #login { background-color: white; color: black; font-family: Helvetica; font-weight: bold; float: right; font-size: 20px; border: 1px solid #000000; } #register { background-color: white; color: black; font-family: Helvetica; font-weight: bold; float: right; font-size: 20px; border: 1px solid #000000; } #form{ display:inline-block; float:right; } </style> <body> <h1>Title <form method="post" id="form"> <input name="login" type="submit" value="Login" id="login">   <input name="register" type="submit" value="Register" id="register"></h1> </body> </html>
解決方案2
0 已采納 2016-11-11 23:42:05
創建帶有h1並在其中包含表格的標頭標記比將表格插入h1標記要好。 試試以下代碼片段：
<html>
<head>
</head>
<style>
header {
border-bottom: 5px solid white;
border-bottom-style: ridge;
height: 50px;
}
h1 {
display: inline-block;
font-family:Helvetica;
font-weight: bolder;
margin: 0;
padding: 0;
line-height: 50px;
}
.form {
margin: 0;
padding: 0;
float: right;
display: inline-block;
line-height: 50px;
}
#login {
background-color: white;
color: black;
font-family: Helvetica;
font-weight: bold;
font-size: 20px;
border: 1px solid #000000;
}
#register {
background-color: white;
color: black;
font-family: Helvetica;
font-weight: bold;
font-size: 20px;
border: 1px solid #000000;
}
</style>
<body>
<header>
<h1>Title</h1>
<form class="form" method="post">
<input name="login" type="submit" value="Login" id="login">
<input name="register" type="submit" value="Register" id="register">
</form>
</header>
</body>
</html>
如何讓這些畫布正確對齊？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.