HTML/CSS 4 链接/按钮答案

【问题标题】：HTML/CSS 4 Links/buttonsHTML/CSS 4 链接/按钮
【发布时间】：2016-10-01 02:02:00
【问题描述】：

我正在尝试在四方形布局中的布局中制作 4 个单独的按钮。（请参阅附图并假装这些框的大小相同且彼此等距）我的问题是，无论浏览器窗口大小如何，我都希望这些框位于页面的中心，除非我不希望按钮重新当页面变得太小时的大小。我正在为如何做到这一点画空白，但这似乎并不难。

body{
	font-family: Arial, Helvetica, Sans-Serif;
	font-size:1em;
	padding:0;
	margin:0;
}

#content{
	position:relative;
}


/* Banner Styling */
#banner {
	display:inline-block;

}

#banner a{
	text-decoration:none;
	color:black;
}

#banner h1{
	float:left;
	padding-left:1em;
	padding-right:auto;
}

#banner #logo{
	position:absolute;
	top:0px;
	right:0px;
}

/* Navigation Styling */
Nav {
	margin-top:2em;
}

Nav ul{
	margin:0;
	padding:0;
	overflow:hidden;
	list-style-type:none;
	background-color: #1666af;
	padding-left:2em;
	min-width:1532px;
}

Nav ul li{
	float:left;
	text-align:center;
	
}

Nav li a{
	border: 1px solid #1666af;
	padding:.3em 2em .3em 2em;
	display: block;
	background-color: #1666af;
	color:White;
	text-decoration:none;
}

Nav .current{
	background-color:green;
	border:1px solid green;
}

Nav li a:hover{
	border: 1px solid #278efc;
	background-color:#278efc;
}

/* BUTTONS */
#buttons{
	position:relative;
	left:50%;
}
#buttons a{
	width:330px;
	height:210px;
	display:inline-block;
	text-align:center;
	color:white;
	text-decoration:none;
	border-radius:6px;
	margin-top:50px;
	box-sizing:border-box;
	padding-top:89px;
}

/* CDW Button */
#button1{
	border:1px solid black;
	background-color:green;
	transition: background-color 1.0s;
}

#button1:hover{
	background-color:yellow;
}

/* ADR button */
#button2{
	border:1px solid black;
	background-color:blue;
	transition: background-color 1.0s;
}

#button2:hover{
	background-color:red;
}

/* GoGatway Button */
#button3{
	border:1px solid black;
	background-color:red;
	transition: background-color 1.0s;
	height:60px!important;
	padding-top:20px!important;
}

#button3:hover{
	background-color:teal;
}

/* AAS button */
#button4{
	border:1px solid black;
	background-color:orange;
	transition: background-color 1.0s;
	height:60px!important;
	padding-top:20px!important;
}

#button4:hover{
	background-color:brown;
}

<!DOCTYPE html>
<html>
	<head>
	<link href="css/styles.css" rel="stylesheet" type="text/css" />
		<title>Website</title>
	</head>

	<body>
	<div id="content">
		<div id="banner">
		<h1><a href="default.htm">Website</a></h1>
			<img id="logo" src="images/imagehere" alt="imagehere" />
		</div>
		<nav>
			<ul>
				<li><a class="current" href="default.htm"> Home</a></li>
				<li><a href="Placeholder.htm">Placeholder</a></li>
				<li><a href="Placeholder.htm">Placeholder</a></li>
				<li><a href="Placeholder.htm">Placeholder</a></li>
				<li><a href="Placeholder.htm">Placeholder</a></li>
				<li><a href="Placeholder.htm">Placeholder</a></li>
			</ul>
		</nav>
		
		<div id=buttons>
			<a href="button1.htm" id="button1">Placeholder</a>
			<a href="button2.htm" id="button2">Placeholder</a>
			<a href="button3.htm" id="button3">Placeholder</a>
			<a href="button4.htm" id="button4">Placeholder</a>
		</div>
		
	</div>
	

	</body>
</html>

【问题讨论】：

请解决您的问题。没有代码就无法链接到 JSFiddle。不要试图作弊来绕过它，它阻止你正常做是有原因的。请在发帖前阅读问题指南。
很抱歉，我真的不明白该网站在提示我做什么。有人好心帮我编辑它，我什至无法弄清楚没有 ctrl-f 的编辑链接在哪里 lol

标签： html css button layout hyperlink

【解决方案1】：

<div id=buttons>
    <!--create a div here-->
    <div class="container" style=" width:100%, height:540px">

        <!--inside this div you create a new div for your foursquares-->
        <div class="forsquare">

            <!--use something like canvas to create the graphic or 
            use something like canvas to get the image how you would like it 
            you can also create a image and map it to create different a href 
            elements that links from the square-->
        </div>

    </div>

【讨论】：

我建议开始使用类似 bootstrap 的东西。
对于卡瓦斯我必须使用 JS 来创建链接和图像吗？我可以这样做，但我希望远离所有这些，因为当其他人编辑此站点时，它可能会有出错的空间。编辑：以及我以前从未使用过引导程序，让我有点紧张，我需要完成它才能在下周进行演示
Bootstrap 非常简单，一切都在您的 html 代码中使用类和数据对象完成，无需进入 jquery。
或者在 css 中尝试这个 .forsquare {margin: 0 auto} 记住将宽度设置为父容器的像素。玩弄它可能会得到正确的输出