时间戳

首页 > 解决方案 > 如何创建并排显示的两个按钮菜单？

html - 如何创建并排显示的两个按钮菜单？

问题描述

我正在尝试创建的此按钮菜单需要一些指导。首先，我需要在每个按钮之后留出间距，以便按钮之间有间隔。

其次，我希望绿色按钮列表位于红色按钮列表旁边，而不是在这两个按钮菜单之间再次出现间隙。我该怎么做呢？

在此处输入图像描述

.btn-group1 a {
  background-color: red; 
  border: 1px solid white; 
  color: white; 
  cursor: pointer; 
  padding: 1em, 2em;
  width: 20%; 
  display: block; 
  font: medium bold;
  font-family: arial, sans-serif;
}

.btn-group2 a {
  background-color: green; 
  border: 1px solid white; 
  color: white; 
  cursor: pointer; 
  padding: 1em, 2em;
  width: 20%; 
  display: block; 
  font: medium bold;
  font-family: arial, sans-serif;
}

.btn-group a:not(:last-child) {
  border-bottom: none; 
}

.btn-group a:hover {
  background-color: #3e8e41;
}


<div class="btn-container">      
         <div class="btn-group1">
        <a href="#">Introduction</a>
        <a href="#">Career Development - IT Support</a>
        <a href="#">Career Development - Testing</a>
      </div> 


      <div class="btn-group2">
          <a href="#">Lesson 1 - Methodologies and Development Lifecycle</a>
          <a href="#">Lesson Breakdown</a>
          <a href="#">Methodologies</a>
          <a href="#">Waterfall SDLC</a>
          <a href="#">Agile SDLC</a>
          <a href="#">Scrum vs Kanban</a>
          <a href="#">Ceremonies</a>
      </div>
    </div>

标签： htmlcss

解决方案

尝试使用 flex 将它们并排放置：

.btn-container {
   display: flex;
   flex-direction: row;
}

至于间距，为您的课程在现有 css 中添加一个边距底部：

.btn-group1 a {
  ...
  margin-bottom: 1em;
  ...
}

.btn-group2 a {
  ...
  margin-bottom: 1em;
  ...
}

考虑重组你的 CSS 以消除欺骗：

.btn-group a {
  border: 1px solid white; 
  color: white; 
  cursor: pointer; 
  padding: 1em, 2em;
  width: 20%; 
  display: block; 
  font: medium bold;
  font-family: arial, sans-serif;
  margin-bottom: 1em;
}
.btn-group1 a {
  background-color: red; 
}

.btn-group2 a {
  background-color: green; 
}

.btn-group a:not(:last-child) {
  border-bottom: none; 
}

.btn-group a:hover {
  background-color: #3e8e41;
}


<div class="btn-container">      
         <div class="btn-group btn-group1">
        <a href="#">Introduction</a>
        <a href="#">Career Development - IT Support</a>
        <a href="#">Career Development - Testing</a>
      </div> 


      <div class="btn-group btn-group2">
          <a href="#">Lesson 1 - Methodologies and Development Lifecycle</a>
          <a href="#">Lesson Breakdown</a>
          <a href="#">Methodologies</a>
          <a href="#">Waterfall SDLC</a>
          <a href="#">Agile SDLC</a>
          <a href="#">Scrum vs Kanban</a>
          <a href="#">Ceremonies</a>
      </div>
    </div>

推荐阅读