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

Question

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

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 不起作用，因为其中有一个空格。一旦我把它拿出来，过渡效果很好。我取出了 html 中的中断代码，并在按钮 css 上添加了一个 float:left (如果窗口太小，它可以转到另一行)。我还弄乱了你的填充，删除了行高、位置和相当多的其他不必要的代码。试试这段代码，如果需要，可以随意调整宽度和高度。

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