對齊輸入框（名稱）和提交按鈕

我剛剛進入HTML和CSS最近，我有點卡在這一個。我在一個登錄框上工作，我無法讓登錄框和提交按鈕完全對齊。對齊輸入框（名稱）和提交按鈕

的唯一途徑那種工作是，如果我寫他們倆在這樣一條線，那麼他們將是（水平）完全一致，但我不是能夠改變它們之間的空間：

第一次嘗試（ <）： < .input type =「text」id =「username」>提交

然後我以其他方式解決了這個問題。它由一個輸入類型的文本和一個輸入類型在我的html文件中提交。

在我的CSS文件中，我首先調用所有我的登錄輸入被列入的類（登錄部分爲.logsec），然後輸入我的輸入類型文本和輸入類型提交的id。

該類稱爲logsec（用於登錄部分），而我的輸入類型提交稱爲id = Button，而我的輸入類型文本稱爲id = subinput。

HTML代碼：

<html lang="en"> 

    <link rel="stylesheet" href="css/style.css"> 
    <link rel="stylesheet" href="css/animate.css"> 
    <link rel="stylesheet" href="css/font.css"> 



<head> 
    <meta charset="utf-8"> 
    <title>Main</title> 

</head> 

<body> 
    <div class="container"> 
     <div class="brandname"> 
      <h1 <id="title" class=""><span id="logo">Test</h1> 
     </div> 
     <div class="logsec"> 
      <div class="box-header"> 
       <p> login</p> 
     </div> 

      <input type="submit" id="button" value="submit" style="float:right"/> 
      <input type="text" id="subinput" style="width:100%;"/> 
     <a href="#"><p class="recover">Recover Password</p></a>  
      <h3> <a href=".../css/style.css"> <p class="signup">signup</a> </h3> 
        <footer> <p Class="footer">LOGIN</p></footer> 
     </div>        
</body>        


</html>

CSS代碼：

body { 

    background-color: grey; 

    font-size: 30px; 

    text-align: center; 
} 



.brandname { 

    margin-top: 300px; 
} 

.recover { 

    font-size: 15px; 

    text-align: center; 
} 

.signup { 

    font-size: 15px; 

    text-align: center; 
} 



/*///////////////////// LOGIN BUTTON ///////////////////////////////////////*/ 

.logsec [id=button] { 

    vertical-align: top;

真的很喜歡，如果有人可以幫助我在這裏。我很可怕，但我希望有人能幫助我。

謝謝你們。

來源

2016-07-06 Noobie

請在這裏發佈代碼，作爲代碼** NOT ** as和圖片 – Shank

添加一個codepen或只是使用代碼按鈕肯定是要走的路 - 無法幫助很多的基礎上沒有很多手動工作轉錄它的圖片。 – will

當您粘貼HTML代碼時，選擇它並點擊'ctrl + k' – Shank

您的代碼中存在一些錯誤，其中一個「.logsec [id = button]」正在停止排列按鈕。我刪除了浮動，並使用內聯塊代替。谷歌它，我相信W3C有一些教程。總之，這裏的工作代碼：

CSS

body { 

    background-color: grey; 

     font-size: 30px; 

     text-align: center; 
    } 



    .brandname { 

     margin-top: 300px; 
    } 

    .recover { 

    font-size: 15px; 

    text-align: center; 
} 

.signup { 

    font-size: 15px; 

    text-align: center; 
} 


#subinput { 
    display: inline-block; 
}

HTML

<div class="container"> 
    <div class="brandname"> 
    <h1 id="title"><span id="logo">Test</span></h1> 
    </div> 
    <div class="logsec"> 
     <div class="box-header"> 
      <p> login</p> 
    </div> 


     <input type="text" id="subinput"/> 
     <input type="submit" id="button" value="submit"/> 
    <a href="#"><p class="recover">Recover Password</p></a>  
     <h3> <a href=""> <p class="signup">signup</a> </h3> 
       <footer> <p Class="footer">LOGIN</p></footer> 
    </div>

這是工作在一個小提琴（我希望，不知道該代碼多久節省了） FIDDLE

來源

2016-07-07 01:36:41 Neil

嘿！非常感謝！。所以你刪除了.logsec [id = button] vertical-align：top; ，style =「width：100％; style =」float：right。哪一個是負責任的？再次感謝。 – Noobie

沒問題:)是的，您發佈的代碼在 .logsec [id = button] { vertical-align：top; 所以我不知道之後發生了什麼，但它阻止了排列的按鈕。然後我從html中獲取內聯樣式，並向css添加了一個display：inline-block。這是另一種浮動沒有浮動的方式。樂意效勞：） – Neil

對齊輸入框（名稱）和提交按鈕

回答

相關問題