如何获得标题和两个按钮以正确对齐边界？

我对编码非常陌生，一位朋友和我正试图将一个网站放在一起，并为网站的标题，我有一些问题得到标题对齐到边界。我用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

如何获得标题和两个按钮以正确对齐边界？

回答

相关问题