如何獲得標題和兩個按鈕以正確對齊邊界？

我對編碼非常陌生，一位朋友和我正試圖將一個網站放在一起，併爲網站的標題，我有一些問題得到標題對齊到邊界。我用float:right使這兩個按鈕對齊頁面的右側。那時他們陷入了邊界的中間，我被困住了。我試圖將它們從&nbsp移開，並且設法讓它們都在邊界上，但是現在標題在邊界上方懸浮得非常高，我希望它平行於按鈕和邊界。這裏是我的代碼：如何獲得標題和兩個按鈕以正確對齊邊界？

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; 
 
}

\t <h1>Title 
 
\t <form method="post"> 
 
\t <input name="login" type="submit" value="Login" id="login"> &nbsp 
 
\t <input name="register" type="submit" value="Register" id="register"></h1>

是否有可能得到這三個要素坐在邊境？

來源

2016-11-11 Adrian M.

這將是更好地創建具有H1標題標籤和如下

#form{ 
    display:inline-block; 
    float:right; 
}

片段它的形式比插入到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>

來源

2016-11-11 23:42:05

非常感謝！你如何能夠按照正確的順序顯示按鈕並且彼此分離，而不是像我一樣在一個塊中顯示？ –

因爲我沒有在按鈕上使用float：right（當你在多個元素上使用float：right時，它們會在右邊，但是按照HTML順序的反向順序），而不是在整個表單上使用它。 –

添加一個id的名字#form到窗體標籤和風格低於

<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"> &nbsp 
 
<input name="register" type="submit" value="Register" id="register"></h1> 
 
</body> 
 

 
</html>

來源

2016-11-11 23:33:55 repzero

如何獲得標題和兩個按鈕以正確對齊邊界？

回答

相關問題