HTML/CSS顯示按鈕在線和自動去下一行

Question

我是HTML/CSS的新手，所以我真的不知道它是如何工作的，但這是我想要的。 還有像塊按鈕，但問題是： -

1）怎樣讓後藤下一行網頁時結束（穩定超過PC其他設備）
2）如何刪除之間的空白不同的按鈕。
3）我只想要的是這些按鈕頁腳和頁眉沒有更多的頁面（但在所有設備上穩定）
4）我如何添加圖片作爲按鈕背景。
5）當我將鼠標懸停在它們上面時，它顯示我添加的類別。

希望你明白我在學習什麼。謝謝。

.button { 
 
    background-color: black; 
 
    text-decoration: none; 
 
    border-radius: 0px 0px 0px 0px; 
 
\t margin:0px; 
 
\t list-style-type:none; 
 
\t line-height:0px; 
 
\t color:white; 
 
    text-align:center; 
 
    padding:100px; 
 
\t width:240px; 
 
\t height:240px; 
 
\t position: relative; 
 
    left: -20px; 
 
\t /*opacity: 0.8;*/ 
 
\t display:inline; 
 
} 
 

 
#options { 
 
    line-height:00px; 
 
\t position:relative; 
 
\t top: 100px; 
 
\t bottom: auto; 
 
    float:center; 
 
    padding:0px 10px 10px 0px; 
 
\t display: inline; 
 
} 
 

 
.button :hover { 
 
\t background-color: white; 
 
    text-decoration: none; 
 
    border-radius: 0px 0px 0px 0px; 
 
\t margin:0px; 
 
\t list-style-type:none; 
 
\t line-height:60px; 
 
\t color:black; 
 
    text-align:center; 
 
    padding:0px; 
 
\t width:210px; 
 
    left: -30px; 
 
\t position:relative; 
 
\t z-index:-0.1; 
 
    opacity: 1; 
 
\t -moz-opacity: 0.8; 
 
    transition: 0.4s ease; 
 
    -webkit-transition: 0.4s ease; 
 
    -moz-transition: 0.4s ease; 
 
} 
 

 
a:link {color:white; background-color:transparent; text-decoration: none;} 
 
a:visited {color:white; background-color:transparent; text-decoration: none;} 
 
a:hover {color:black; background-color:transparent; text-decoration: none; } 
 
a:active {color:white; background-color:transparent; text-decoration: none}

<div id="options"> 
 
\t \t \t <a class="button" onclick="textdisplay(0)">What's New</a> 
 
\t \t \t <a class="button" onclick="textdisplay(1)">My Account</a> 
 
\t \t \t <a class="button" onclick="textdisplay(2)">Server Data</a> 
 
\t \t \t <br /> 
 
\t \t \t <a class="button" onclick="textdisplay(3)">OLD Posts</a> 
 
\t \t \t <a class="button" onclick="textdisplay(4)">Last Left HTML</a> \t 
 
\t \t </div>

所有的

Answer 1

首先，你的按鈕：懸停的CSS不工作，因爲你有一個空格。一旦我拿出來，過渡很好。我在html中取出了中斷代碼，並在按鈕css上添加了一個float：它允許如果窗口太小，它會轉到另一行。我也弄亂了你的填充，刪除了行高，位置和其他很多不必要的代碼。如果你願意的話，試試這個代碼並且弄亂寬度和高度。

.button { 
    background-color: black; 
    border-radius: 0px 0px 0px 0px; 
    margin:0px; 
    color:white; 
    text-align:center; 
    padding:100px; 
    width:240px; 
    height:40px; 
    float:left; 
} 

#options { 
    position:relative; 
} 

.button:hover { 
    background-color: white; 
    border-radius: 0px 0px 0px 0px; 
    margin:0px; 
    color:black; 
    opacity: 1; 
    -moz-opacity: 0.8; 
    transition: 0.4s ease; 
    -webkit-transition: 0.4s ease; 
    -moz-transition: 0.4s ease; 
} 

a:link {color:white; background-color:transparent; text-decoration: none;} 
a:visited {color:white; background-color:transparent; text-decoration: none;} 
a:hover {color:black; background-color:transparent; text-decoration: none;} 
a:active {color:white; background-color:transparent; text-decoration: none;}