如何使HTML代碼更具可讀性？

我有5個按鈕，編碼在單行上。這讓我可以將它們緊挨着擠在一起，兩者之間沒有任何空隙，這正是我想要的。如何使HTML代碼更具可讀性？

但是，如果我將每個按鈕的代碼向下移動一行，則按鈕之間會有空格，這是我不想要的。

這裏是2個按鈕的代碼示例：

<button id="home" type="button">Home</button><button id="save" type="button">Save 
</button><button id="create" type="button">Create</button>

感謝

來源

2014-07-10 Pangu

@ T.J.Crowder，他纔打破單一的責任，問題模式？在一個問題中的一個問題不是[如何問]的一部分。（http://stackoverflow.com/questions/how-to-ask）.. cmiiw –

我已重新編輯我的問題，現在包含1個問題。 – Pangu

@YuliamChandra：可能應該在那裏添加。 –

與類創建按鈕：

<button class="button" id="save">Save</button> 
<button class="button" id="new">New</button> 
<button class="button" id="load">Load</button>

在CSS文件中創建一個類：

.button { 
    display: block; 
    float: left; 
    width: 100px; /*For example*/ 
}

這將使你的按鈕粘在一起，沒有空格，HTML會更具可讀性。

編輯：當你使用一個ID，在你的CSS類中添加一個帶有空白左邊的ID。

/* in this example, the button to the mostleft is #save, so...*/ 
#save { 
    margin-left: 10px; 
}

這裏是demo

來源

2014-07-10 07:07:53 Cheshire

非常感謝！ – Pangu

快速的問題，如果我只想把最左邊的按鈕放在右邊一些像素，我會怎樣做，而不影響所有按鈕的填充？ – Pangu

編輯了答案 – Cheshire

您可以使用輸入元素的「class」屬性來定義其影響是得到了所有的按鈕樣式選項類。讓我告訴你：

<button id="home" type="button" class="btn-style">Home</button> 
<button id="save" type="button" class="btn-style">Save</button> 
<button id="create" type="button" class="btn-style">Create</button>

而且在你的CSS，你有兩種風格：

.btn-style{ 
//your css here 
}

有你只需使用CSS樣式的按鈕之間沒有空格。但對於這一點，在谷歌搜索。您可能需要樣式屬性，如「顯示，邊距，浮點...」。

格爾茨

來源

2014-07-10 07:02:08 Trickzter

嗯，這是相當刺激性的HTML在這一點，但我的方式解決這個問題如下：

<button>btn1</button 
><button>btn2</button 
><button>btn3</button 
><button>btn4</button 
><button>btn5</button>

或者其他用戶也暗示，你可以插入註釋在兩者之間：

<button>btn1</button><!-- 
--><button>btn2</button><!-- 
--><button>btn3</button><!-- 
--><button>btn4</button><!-- 
--><button>btn5</button>

來源

2014-07-10 07:02:13 Anomaly

爲了您的內聯元素，如<button>之間的空間問題，嘗試編寫代碼那樣：

<button id="home" type="button">Home</button><!-- 
--><button id="save" type="button">Save</button><!-- 
--><button id="create" type="button">Create</button>

來源

2014-07-10 07:02:17 singe3

通過button選擇和任何特定的樣式應用於普通的CS他們IDS

button{ 
    margin-top: 20px; 
    height: 40px; 
    width: 240px; 
} 
#home{ 
    margin-left: 40px; 
} 
#save{ 

}

來源

2014-07-10 07:02:59 JayKandari

你可以把換行字符的標籤內：

<button>btn1</button 
><button>btn2</button 
><button>btn3</button>

您可以註釋掉你的標籤之間的空間，所以它就好像空間甚至不存在。

<button id="home" type="button">Home</button><!-- 
--><button id="save" type="button">Save</button><!-- 
--><button id="create" type="button">Create</button>

至於CSS，CSS可以讓你同時定義多個classes/id/etc的屬性。

#save, #home { 
    margin-top: 20px; 
    height: 40px; 
    width: 240px; 
} 
#home { margin-left: 40px; }

來源

2014-07-10 07:04:17 lucasem

如何使HTML代碼更具可讀性？

回答

相關問題