聯繫表格：複選框和標籤的水平對齊

我只是想知道是否有人知道這個答案。如果你這樣做，你是一個真正的網絡專家！聯繫表格：複選框和標籤的水平對齊

我正在爲音樂家網站創建聯繫表單。我有一個部分，我希望用戶通過複選框選擇想要學習的樂器。

X鋼琴 X槽紋 X唱歌 X小提琴

等

其中x是複選框。

但是我想的複選框，其標籤將橫向跨頁例如： -

X鋼琴X槽紋X唱歌X小提琴

爲了縮短表單字段的長度一致。有誰知道如何做到這一點，而不需要將標籤與標籤分開，並將標籤移動到頁面的另一部分？

我希望我的表單看起來更像這樣：http://www.bpcollins.co.uk/contact/form （尤其是'感興趣的服務'部分）。

我的代碼如下：

HTML：

我感興趣的學習（請打勾）：

<div class="check"> 
<label id="checkbox">Piano</label><input id="piano" type="checkbox"    name="instrument" value="Piano"> 
<label id="checkbox">Flute</label><input id="flute" type="checkbox" name="instrument" value="Flute"> 
<label id="checkbox">Singing</label><input id="singing" type="checkbox" name="instrument" value="Singing"> 
<label id="checkbox">Violin</label><input id="violin" type="checkbox" name="instrument" value="Violin"> 
<label id="checkbox">Keyboard</label><input id="keyboard" type="checkbox" name="instrument" value="Keyboard"> 
<label id="checkbox">Interview Technique for School and University</label><input id="interview_technique" type="checkbox" name="instrument" value="Interview"> 
<label id="checkbox">English</label><input id="english" type="checkbox" name="instrument" value="English"> 
<label id="checkbox">Theatre Training</label><input id="theatre" type="checkbox" name="instrument" value="Theatre"> 
<label id="checkbox">Speech Development</label><input id="speech" type="checkbox" name="instrument" value="Speech Development"> 
</div> 

<br> 
<hr> 

<p> I want to enrole as a </p> 



<label id="checkbox">Primary School Child</label><input id="primary" type="checkbox" name="child" value="Primary">  
<label id="checkbox">Secondary School Child</label><input id="secondary" type="checkbox" name="child" value="Secondary"> 
<label id="checkbox">Adult</label><input id="adult" type="checkbox" name="child" value="adult"> 





<br>

CSS：

input[type="checkbox"] { 
    background-color: #fff; 
    font-style: normal; 
    background-position: 0px !important; 
    padding: 0px; 
    border-radius: 0px; 
    margin: 10px; 
    clear: left; 



} 

label#checkbox { 

    float: left; 
    text-align: left; 
    position: relative; 
    left: 40px; 
    top: 18px; 

}

我將非常感謝你的迴應！

問候，

羅伯特

倫敦英國

來源

2013-05-26 Rob644

你可以嘗試這樣的事情......

把

<div class="whatever"><label id="checkbox">Flute</label><input id="flute" type="checkbox" name="instrument" value="Flute"></div>

各地的每一個

，然後在CSS把

.whatever { display: inline-block; }

如果不行嘗試.whatever {foat：離開; }帶或不帶顯示器：inline-block的

確保您的。檢查的容器類是足夠寬，以便能夠充分複選框標籤和輸入顯示

來源

2013-05-26 20:50:22 bob

-1

謝謝lawnlanders。實際上，我發現一個更好的方法是將表格中的複選框及其標籤對齊，然後添加填充和邊距以在單元格之間添加一些空間。

例如：

 <table> 
     <tr> 
      <td><label id="checkbox">Piano</label><input id="piano" type="checkbox" name="instrument" value="Piano" class="required" title="Please check at least one option."> 
      </td> 

      <td> 
      <label id="checkbox">Flute</label><input id="flute" type="checkbox" name="instrument" value="Flute"> 
      </td> 

      <td> 
      <label id="checkbox">Singing</label><input id="singing" type="checkbox" name="instrument" value="Singing"> 
      </td> 
     </tr> 


     <tr> 
      <td> 
      <label id="checkbox">Violin</label><input id="violin" type="checkbox" name="instrument" value="Violin"> 
      </td> 


      <td> 
       <label id="checkbox">Keyboard</label><input id="keyboard" type="checkbox" name="instrument" value="Keyboard"> 
      </td> 


      <td> 
       <label id="checkbox">Interview Technique</label><input id="interview_technique" type="checkbox" name="instrument" value="Interview"> 
      </td> 
     </tr> 

     <tr> 


      <td> 
       <label id="checkbox">English</label><input id="english" type="checkbox" name="instrument" value="English"> 
      </td> 


      <td> 
       <label id="checkbox">Theatre Training</label><input id="theatre" type="checkbox" name="instrument" value="Theatre"> 
      </td> 


      <td> 
       <label id="checkbox">Speech Development</label><input id="speech" type="checkbox" name="instrument" value="Speech Development"> 
      </td> 

     </tr> 
    </table>

你的技術工作，但不提供帶有上述方法的比對和介紹。

謝謝！

來源

2013-05-29 08:21:28 Rob644

表是不爲表單或佈局上市制成。 – wiesson

-2

我使用鮑勃的建議，但像這樣

.whatever { display: inline-block; } 
.whatever input, .whatever label{ float:left !important; }

希望它能幫助

來源

2017-04-27 09:59:55 okamikun

聯繫表格：複選框和標籤的水平對齊

回答

相關問題