html - 如何在 html 和 css 旁边显示 2 个大按钮

Question

我是 html 和 css 的新手，我正在尝试制作网页。
我创建了 2 个大按钮，每个按钮大约是屏幕大小的一半。问题是我无法将它们并排显示。相反，它们一个一个地显示在另一个之上。

一小段 html 位于添加的代码段的 css 下方，可能看起来有点乱。

编辑:想法是创建一个分成 2 部分的页面，例如 --> http://www.masitupungato.com/ <-- 但非常基本的外观

截图如下:

body {
	background: #191B1C;
	color: white;
	font-family: helvetica;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

li a{
	color: white;
	background: #2A2F30;
	height: 616px;
	width: 650px;
	border-radius: 40px;
	text-align: center;
	font-size: 100px;
	font-weight: bold;
	text-decoration: none;	
	padding-top: 400px; 
	display: inline-block;
}

li a:hover{
	background: #2FA2C4;
	border: 4px solid white;
}

<div>
	<ul>
		<li id="left-container"><a href="#">Browse</a></li>
		<li id="right-container"><a href="#">Upload</a></li>
	</ul>

</div>

Answer 1

为 ul li 添加样式

ul li {
    float:left; //or display:inline-block;
}

body {
	background: #191B1C;
	color: white;
	font-family: helvetica;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul li {
  float:left
}

li a {
	color: white;
	background: #2A2F30;
	height: 616px;
	width: 650px;
	border-radius: 40px;
	text-align: center;
	font-size: 100px;
	font-weight: bold;
	text-decoration: none;	
	padding-top: 400px; 
	display: inline-block;
}

li a:hover{
	background: #2FA2C4;
	border: 4px solid white;
}

<div>
	<ul>
		<li id="left-container"><a href="#">Browse</a></li>
		<li id="right-container"><a href="#">Upload</a></li>
	</ul>

</div>