HTML/CSS 在线显示按钮并自动转到下一行

Question

我是 HTML/CSS 的新手，所以我真的不知道它是如何工作的，但这就是我想要的。有像块一样的按钮，但问题是：-

1) 如何在页面结束时转到下一行（对于 PC 以外的其他设备稳定）
2) 如何去除不同按钮之间的边距。
3) 我想要的只是这些按钮，一个页脚和一个页眉，在该页面上仅此而已（但在所有设备上都稳定）
4) 如何添加图片作为按钮背景。
5）当我将鼠标悬停在它们上方时，它会显示我添加的类别。

希望你明白我想学什么。谢谢。

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

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

.button :hover {
 background-color: white;
    text-decoration: none;
    border-radius: 0px 0px 0px 0px;
 margin:0px;
 list-style-type:none;
 line-height:60px;
 color:black;
    text-align:center;
    padding:0px;
 width:210px;
    left: -30px;
 position:relative;
 z-index:-0.1;
    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}

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

Answer 1

首先，您的按钮 :hover css 不起作用，因为其中有一个 space。一旦我把它拿出来，过渡效果很好。我取出了html中的中断代码，并在按钮css上添加了一个float:left（如果window太小，它可以转到另一行） .我还弄乱了你的填充，删除了行高、位置和相当多的其他不必要的代码。试试这个代码，如果你愿意，可以修改宽度和高度。

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

HTML/CSS 在线显示按钮并自动转到下一行

HTML/CSS showing buttons online and auto going to next line

html

css

button