どのように私は入力の残りの部分と「状態」とドロップダウンボックスを揃えることができ、ここで

Question

をラベルの形式は次のとおりです。http://imgur.com/aB5hTvI

は、このドロップダウンボックスのHTMLです：

<div id = "myForm"> 
     <form> 
      <p> <label for="state">State: </label> 
       <select id="state" name="state"> 
        <option value="ACT">ACT</option> 
        <option value="NSW">NSW</option> 
        <option value="NT">NT</option> 
        <option value="QLD">QLD</option> 
        <option value="SA">SA</option> 
        <option value="TAS">TAS</option> 
        <option value="VIC">VIC</option> 
        <option value="WA">WA</option> 
       </select> 
      </p> 
     </form> 

この私のCSSです：

#myForm { 
    margin: auto; 
    width: 600px; 
} 
#myForm form { 
    background-color: #E0E0E0; 
    text-align: center; 
} 
#myForm label { 
    display: inline-block; 
    text-align: left; 
    width: 150px; 
} 
#myForm input { 
    display: inline-block; 
    text-align: center; 
} 
#myForm select { 
    display: inline-block; 
} 

どのように私はラベルとドロップダウンボックスを他のラベルとテキストボックスに合わせることができますか？ Iveは#myForm selectで "text-align：left"を試しましたが、フォームに目立った変更はありません。

Answer 1

はあなたの状態が含まれてい<p>タグにtext-align:leftを追加する必要が選択、すなわち：

HTML：

<div id = "myForm"> 
    <form> 
     <p id="whatever"> <label for="state">State: </label> 
      <select id="state" name="state"> 
       <option value="ACT">ACT</option> 
       <option value="NSW">NSW</option> 
       <option value="NT">NT</option> 
       <option value="QLD">QLD</option> 
       <option value="SA">SA</option> 
       <option value="TAS">TAS</option> 
       <option value="VIC">VIC</option> 
       <option value="WA">WA</option> 
      </select> 
     </p> 
    </form> 
</div> 

CSS：

あなたのオリジナルのCSS +

#whatever { 
    text-align:left; 
} 

See it here