htmlテキストの入力とチェックボックス。 CSSの問題

Question

編集：これは今のようになります：https://jsfiddle.net/vmd7m3yh/5/ それは良いですが、間違いなく、入力を正しくリストする方法を整理する必要があります。

私はhtml/cssで問題に遭遇しています。 私はこのようなものにしようとしています：

問題は、私は彼らにこの方法を揃えることができる方法を知ってはいけないということです。 入力とチェックボックスでfloatを使用しようとしましたが、チェックボックスは最初のラベルにプッシュバックされます。

現在の状況：

https://jsfiddle.net/vmd7m3yh/

CSSの特定のdivのためには、ファイルの一番下にあります。

何を変更する必要がありますか？私は非常にHTMLについてのSOの質問をするのはかなり恥ずかしいです。 、:)

/*Custom form*/ 
 

 
.workorder-form { 
 
    margin-bottom: 5px; 
 
} 
 

 
.workorder-form form { 
 
    margin-top: 15px; 
 
    width: 500px; 
 
} 
 

 
.workorder-form label { 
 
    margin-top: 5px; 
 
} 
 

 
.workorder-form input[type=text] { 
 
    float: right; 
 
    margin-top: 5px; 
 
} 
 

 
.workorder-form input[type=checkbox] { 
 
    background-color: yellow; 
 
} 
 

 
.workorder-form textarea { 
 
    width: 350px; 
 
    height: 200px; 
 
    padding-bottom: 5px; 
 
}

<div class="workorder-form"> 
 
    <form class="workorder-form"> 
 
    <h4>@Resources.WorkReport</h4> 
 
    <label>some label</label> 
 
    <input type="text" name="orderNumber" value="" /> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br /> 
 

 
    <label>some label</label> 
 
    <input type="text" name="phone" value="" /> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br /> 
 

 
    <label>some label</label> 
 
    <input type="text" name="email" value="" /> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br /> 
 

 
    <label>some label</label> 
 
    <input type="text" name="email" value="" /> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br /> 
 

 
    <label>some label</label> 
 
    <input type="text" name="email" value="" /> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br /> 
 

 
    <label>some label</label> 
 
    <input type="text" name="email" value="" /> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br /> 
 

 
    <label>some label</label> 
 
    <textarea name="email" value=""></textarea><br /> 
 

 
    </form> 
 
</div>

編集すてきてください：次のようになります。https://jsfiddle.net/vmd7m3yh/5/ それは間違いなく、より良いのですが、私は正確に入力を一覧表示する方法を整理する必要があります。..ちょっと厄介右今。

Answer 1

全く別のことをして解決しました。私は1 divを作って、そのdivの中に2つの新しいdivを挿入しました。私はチェックボックスとスパンを別のラベルに入れてからフォームに入れました。問題が解決しました:)

Answer 2

あなたの入力がそのフィドルには大きすぎる、あなたのCSSに

input { 
    height: 30px; 
} 

のようなものを追加してみてくださいと

編集を参照してください。あなたの代わりにフィドルの左側の外部リソースとしてのブートストラップ追加することができますCSSボックスにコピーしてください:)

Answer 3

このCSSを削除して、役立つかどうか試してみてください。

.workorder-form input[type=text] { 
    float:right; 
    margin-top: 5px; 
} 

か、単に削除フロート：右

Answer 4

あなたは、私がこの中にあなたのHTML/CSSコードに行った変更をJS試すことができますフィドル - https://jsfiddle.net/39L08e96/

HTML：

<div class="workorder-form"> 
     <form class="workorder-form"> 
       <h4>@Resources.WorkReport</h4> 
       <label> 
        <span>some label</span> 
        <input type="text" name="orderNumber" value="" /> 
        <input type="checkbox" name="vehicle" value="Bike"> 
        <span>I have a bike</span> 
       </label> 

       <br /> 

           <label> 
        <span>some label</span> 
        <input type="text" name="orderNumber" value="" /> 
        <input type="checkbox" name="vehicle" value="Bike"> 
        <span>I have a bike</span> 
       </label> 

       <br /> 


         <label>some label</label><br /> 
         <textarea name="email" value=""></textarea><br /> 

     </form> 
</div> 

とCSS：

.workorder-form label * { 
     float: left; 
     margin-top: 5px; 
     margin-left: 5px; 
    } 

    .workorder-form input[type=text] { 
     float:left; 
     margin-top: 5px; 
    } 

Answer 5

削除：

.workorder-form input [type = "text"] { float：left; (remove) }