html文本輸入和複選框。 css Issue

編輯：現在看起來像這樣：https://jsfiddle.net/vmd7m3yh/5/ 它更好，當然，但我需要理清如何正確列出輸入..現在有點亂。html文本輸入和複選框。 css Issue

我遇到了html/css中的問題。我想做這樣的事情：

問題是，我不知道我怎麼可以這樣對齊他們。我試圖在輸入和複選框上使用浮點數，但複選框被推回到第一個標籤。

現狀：

爲特定的div的CSS是在文件的底部。

任何想法我應該改變？對於關於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/ 這是更好的，絕對的，但我需要理清如何正確列出輸入..有點兒凌亂權現在。

來源

2017-04-07 Катерина

它可能是因爲你有一個簡單的形式6k css行？ – AlwaysConfused

簡單添加到標籤** float：left **並從輸入中刪除** float：right **。看到[這jsfiddle]（https://jsfiddle.net/r8qbkhue/） – AlwaysConfused

我解決了它做了完全不同的事情。我做了1個div，並在該div中插入了2個新div。所以我有複選框，並跨越另一個標籤，然後形式。問題解決了:)

來源

2017-04-13 11:04:16

你的輸入是對小提琴太大，嘗試添加類似

input { 
    height: 30px; 
}

在你的CSS，看看

編輯：您可以在小提琴的左側添加引導作爲外部資源，而不是複製它在CSS框中:)

來源

2017-04-07 13:05:24 Theo

嘗試刪除此CSS，看看它是否有幫助。

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

或只是刪除浮動：權

來源

2017-04-07 13:11:17 Help

你可以試試我沒有在這你的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; 
    }

來源

2017-04-07 13:27:40

這實際上可能會工作，但看到我的編輯。因爲標籤的大小不一樣，它會變得有點亂，通常我會在文本框和複選框上浮動，但是因爲複選框上有一個標籤，它會自動浮動到左側。 –

另外我不認爲我可以使用它，因爲我使用asp。你不可能知道這一點。 @ Html.LabelFor（model => model.Workreport.Ordernumber）我有一輛自行車
–

刪除：

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

來源

2017-04-07 13:51:31

看到我的編輯jsfiddle，已經被刪除;） –

只需刪除float，.workorder-form input [type =「text」] {float：right; （去掉）} –

html文本輸入和複選框。 css Issue

回答

相關問題