1. 首頁
  2. 問答
  3. 以html格式表示的Allignment問題

以html格式表示的Allignment問題

2011-05-12 68 views
1

我在html5文檔中有以下表單。就html和css而言，我是一個新手。基本上，我試圖通過試驗來學習。以html格式表示的Allignment問題

<form> 
    <ol style="list-style:none"> 
     <li style="display: inline"> 
      <label for="fname">First Name</label> 
      <input id="fname" type="text"> 
     </li> 
     <li style="display: inline"> 
      <label for="lname">Last Name</label> 
      <input id="lname" type="text"> 
     </li> 
     <li> 
      <label for="dept">Department</label> 
      <input id="dept" type="text"> 
     </li> 
    </ol> 
</form>

來到我面對的挑戰，

1）我需要知道我可以控制標籤和輸入框之間的間距。

2）還有兩個li（名字和姓氏）之間的空格。

PS：我也有控制字體，顏色，輸入寬度等CSS文件

來源

2011-05-12 user700284

+0

「label」元素的'for'屬性引用了它所關聯控件的'id'。您的表單控件上沒有ID。 – Quentin 2011-05-12 09:19:20

+0

對不起..那是一個錯字。編輯了代碼。 – user700284 2011-05-12 11:46:10

+0

沒有名字的輸入不能成功控制。 – Quentin 2011-05-12 11:46:50

回答

0

嘗試在您input元件使用margin-bottom和margin-top。

請參閱here瞭解更多關於邊緣在CSS中的信息。

來源

2011-05-12 08:53:31

+0

thanks.that爲我做了詭計。 – user700284 2011-05-12 12:06:29

2

請嘗試下面的代碼。

對於「OL李標籤」（在CSS代碼）也可以使用餘量代替寬度，控制標籤和輸入項目之間的距離。

<head> 
    <style> 
    ol{ 
     margin:0; 
     padding:0; 
    } 
    ol li{ 
     margin:0 0 10px 0; 
    } 
    ol li label{ 
     width:150px; 
     float:left; 
    } 
    ol li input{ 
     float:left; 
    } 
    </style> 
</head> 

<body> 
    <form> 
     <ol> 
      <li> 
       <label for="fname">First Name</label> 
       <input name="fname" type="text"> 
      </li> 
      <li> 
       <label for="lname">Last Name</label> 
       <input name="lname" type="text"> 
      </li> 
      <li> 
       <label for="dept">Department</label> 
       <input id="dept" type="text"> 
      </li> 
     </ol> 
    </form> 
</body>

來源

2011-05-12 09:22:24 zekia

相關問題

 相關問題