如何在彼此旁边显示2个大按钮html＆amp; CSS

Question

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

html的小部分低于添加片段的CSS，这可能看起来有点乱。

编辑：我们的想法是创建一个分为2的页面，如 - ＆gt; http://www.masitupungato.com/＆lt; - 但非常基本的看法

以下是截图：

＆＃13;

＆＃13;

#include <vector>
#include <iostream>
#include <algorithm>
using namespace std;
void print(int v) {
    cout << v << ", ";
}

struct Sequence {
    int start;
    Sequence(int a,int b): start(a) { }
    Sequence(int start) :start(start) {}
     operator int() const{
        return start;//LINE I
    }
};
int main() {
    vector<int> v1(7);
    fill(v1.begin(), v1.end(), Sequence(1,2));//LINE II
    for_each(v1.begin(), v1.end(), print);
    return 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

为ul li

添加样式

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

＆＃13;

＆＃13;

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

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用display：table-cell;关于李项目。

li {
  display: table-cell;
}

https://jsfiddle.net/9627av37/1/

Answer 3

简单显示：flex;应该这样做。

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

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

li a{
	color: white;
	background: #2A2F30;
    display-inline:block;
	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 4

＆＃13;

＆＃13;

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

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
li { display: inline-block;}

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

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;

只需将li { display: inline-block; }添加到CSS中，并祈祷用户有一个宽阔的窗口。

Answer 5

您可以为每个td使用宽度为50％的表格，并获取其中的按钮，如

<table width="100%" border="1">
   <tbody>
      <tr>
         <td width="50%" align="center"><button>first</button></td>
         <td width="50%" align="center"><button>second</button></td>
      </tr>
   </tbody>
</table>

虽然这不是最好的情况，但你可以使用你的东西，最好是使用bootstrap和其他库，让你的网格系统做到这一点。

请查看这些图书馆。

Answer 6

谢谢你的快速回答。这两种方案都有效 如果我使用ul li {float: left;}页脚（我没有在这里插入我的代码段）弹出，但这不是问题。

我曾尝试float: left;将其写入我的div 类并且没有用。 无论如何，谢谢:)）