編寫html頁面時常見的問題（二）

此次我接着說幾個編寫頁面時常見的另外幾個問題。

不能水平居中對齊

在咱們寫頁面的時候，會遇到一些小細節就是不能水平居中對齊，這種狀況影響了頁面的美觀，這也是寫頁面的質量不過關的一個體現，其實這種狀況的頁面也有不少，說明寫頁面的人沒有細節處理！例以下面看到的這種狀況：就是單選按鈕和文字不能水平居中

有的人會給按鈕加一個margin-top,結果看到的是這樣的，只是把總體距離頂部的距離拉開了，

可能你們也知道處理方法，可是就是以爲麻煩，一個好的頁面，確實該麻煩的仍是要麻煩，由於頁面的美觀真的很重要！！若是遇到一個盒子裏面的兩個對象不能很好的使用margin-top來細節調整的話

解決辦法：就是分別讓他們浮動，這個時候再使用margin-top就爲所欲爲了；這種方法在遇到左右對齊不能使用margin-top來控制的狀況都比較實用，好比文字和輸入框，或者兩個並排的行內標籤等都是用這種方式處理！

 

實現單選

既然說到了單選按鈕，那我想接着說的是常常看到註冊頁面上，相似於性別的選擇，只能選一種的方法，緊接着剛纔的案例（爲了簡便理解，這裏暫時沒有處理左右對齊的問題）：

解決辦法：經過對想要進行單選的這一組按鈕添加一個屬性name,而且他們的值都要同樣,例如：name="sex";

若是是更多的單選選擇，那麼全部的都添name屬性，而且值都同樣就行

擴大點擊的觸發區域

不少時候咱們會遇到一種狀況，就是在點擊單選或者複選框時候，咱們點擊它對應的文字也是能夠被選中的，例如我選擇"男"，男左邊的按鈕就會顯示被選中，

解決辦法：這個也是經過屬性就能夠實現的，能夠給input添加一個id屬性，而且給一個值，好比:id="nan";給他對應的文字用label標籤環繞，而且給這個標籤添加屬性for,而且for的取值要跟input的id取值要同樣，例如如下：不只實現了單選，還實現了擴大點擊的觸發區域！

 若是本文對你有幫助，記得推薦一下哦！