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;}