CSS 边框彼此相邻

Question

我做了一个带有边框的网站，其中包含按钮作为网站的链接（主要用于练习），问题是我不知道如何按照我的意愿并排放置这些边框。

html,
body {
  font-family: Arial, Sans-Serif;
  text-align: center;
  padding: 20px;
}

.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 15px 32px;
  margin: auto;
  display: block;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 10px;
}

.button:hover {
  background-color: #038253;
}

.border {
  border: 3px solid black;
  padding: 10px;
  margin: auto;
  width: 150px;
  margin-top: 20px;
}

.border-2 {
  border: 3px solid black;
  padding: 10px;
  margin: auto;
  width: 150px;
  margin-top: 20px;
}

<h1>Test Site</h1>
<!-- Button Group 1 -->
<div class="border">
  <button type="button" class="button" onclick="window.open('https://example.com')">Button 1</button>
  <button type="button" class="button" onclick="window.open('https://example.com')">Button 2</button>
  <button type="button" class="button" onclick="window.open('https://example.com')">Button 3</button>
</div>

<!-- Button Group 2 -->
<div class="border-2">
  <button type="button" class="button" onclick="window.open('https://example.com')">Button 1</button>
  <button type="button" class="button" onclick="window.open('https://example.com')">Button 2</button>
  <button type="button" class="button" onclick="window.open('https://example.com')">Button 3</button>
</div>

我尝试浮动元素，期望能够仅使用边距来添加空间，结果却导致它仍然位于对象下方（不是我想要的），并且位于最边缘而不是靠近边框。

预期的结果是让两个组彼此相邻浮动，而不是在页面上位于其下方。

Answer 1

您应该将两个 div 包裹在另一个 div 中并以 Flex 方式显示。您可以在这里阅读有关 Flexbox 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

html,
body {
  font-family: Arial, Sans-Serif;
  text-align: center;
  padding: 20px;
}

.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 15px 32px;
  margin: auto;
  display: block;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 10px;
}

.button:hover {
  background-color: #038253;
}

.border {
  border: 3px solid black;
  padding: 10px;
  margin: auto;
  width: 150px;
  margin-top: 20px;
}

.border-2 {
  border: 3px solid black;
  padding: 10px;
  margin: auto;
  width: 150px;
  margin-top: 20px;
}

.border-container {
   display: flex;
   align-items: center;
   gap: 1rem;
}

<h1>Test Site</h1>
<!-- Button Group 1 -->
<div class="border-container>

 <div class="border">
  <button type="button" class="button" onclick="window.open('https://example.com')">Button 1</button>
  <button type="button" class="button" onclick="window.open('https://example.com')">Button 2</button>
  <button type="button" class="button" onclick="window.open('https://example.com')">Button 3</button>
</div>

<!-- Button Group 2 -->
<div class="border-2">
  <button type="button" class="button" onclick="window.open('https://example.com')">Button 1</button>
  <button type="button" class="button" onclick="window.open('https://example.com')">Button 2</button>
  <button type="button" class="button" onclick="window.open('https://example.com')">Button 3</button>
</div>
</div>