2016-07-06 10 views
0

私はちょうどhtmlとcssに最近入っていて、ちょっとこれに固執しています。私はログインボックスに取り組んでおり、ログインボックスと送信ボタンを完全に一致させることはできません。入力ボックス(名前)と送信ボタンの整列

ザ・が唯一の方法は、その種の仕事をして私はこのような1行にそれらの両方を書いた場合は、その後、彼らは(水平に)完全に整列されるだろうが、私はそれらの間のスペースを変更することが波平は:

最初の試み(の後のドットなしのコード): <。入力タイプ= "text" id = "username"> submit

その後、私は他の方法でそれを取り上げました。これは、入力タイプのテキストと入力タイプのサブミットを私のhtmlファイルで構成されています。

私のCSSファイルでは、最初にすべてのログイン入力がnisted(ログインセクションの.logsec)であるクラスを呼び出してから、入力タイプのテキストと入力タイプのIDを送信します。

クラスはlogsec(ログインセクション用)と呼ばれ、入力タイプの送信はid = Buttonと呼ばれ、入力タイプのテキストはid = subinputと呼ばれます。

HTMLのCODE:

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

が本当に大好きです。 私は恐ろしいですが、私は誰かが私を助けることを願っています。

ありがとうございます。

+0

ここにコードを載せてください。画像 – Shank

+0

コードボタンを追加するか、コードボタンを使用するだけで確実に移動できます。手作業で手作業をすることなく、画像に基づいて多くの手助けをすることはできません。 – will

+0

HTMLコードを貼り付けたら、それを選択して 'ctrl + k'を打ちます。 – Shank

答えて

0

コードにエラーがあり、そのうちの1つが ".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

+0

ねえ!どうもありがとう!。そこで、あなたは.logsecを削除しました。[id = button] { vertical-align:top; 、style = "width:100%; style =" float:right "を指定します。責任あるのはどちらですか?再度、感謝します。 – Noobie

+0

問題ありません:)あなたが投稿したコードは、 .logsec [id = button] { vertical-align:topの後に途切れてしまいました。 それ以来何が起こったのか分かりませんが、ボタンの並びが止まっていました。次に、HTMLからインラインスタイルを取り出し、表示を追加しました:インラインブロックをCSSに追加しました。フロートなしで浮動する別の方法です。喜んで:) – Neil

関連する問題