时间戳

首页 > 解决方案 > 你如何让这些按钮并排而不是堆叠出现？

html - 你如何让这些按钮并排而不是堆叠出现？

问题描述

我已经尝试过 inline 和 inline-block ，但它不起作用。我还尝试设置宽度和高度buttonsDiv，以防万一没有一个会导致它搞砸。

我在这里有点困惑，将这些按钮并排而不是彼此叠放的方法是什么？

https://codepen.io/hiarooo/pen/vYxYdOj

HTML

<div class="buttonsDiv">
  <h4><a href="#" class="fancyButton">Button 1</a></h4>
  <h4><a href="#" class="fancyButton">Button 2</a></h4>
</div>

CSS

/*FancyButtonStuff*/
.buttonsDiv{
  
}

.buttonContainer{
    margin-top:100px;
    text-align:center;
}

h4{
    color:rgba(69, 69, 69, 1);
    /*line-height:2em;*/
}

/* BUTTON CSS
------------------------------------------- */

a.fancyButton{
  display:inline-block;
    
    /*font:normal normal 300 1.3em 'Open Sans';*/
  font-size:0.8em;
    text-decoration:none;   
    
    color:rgba(28, 190, 131, 1);
    background-color:transparent;
    border:1px solid rgba(28, 190, 131, 1);
    border-radius:100px;
    
    padding: .3em 1.2em;
    margin:5px;
            
    background-size: 200% 100%; 
    background-image: linear-gradient(to right, transparent 50%, rgba(28, 190, 131, 1) 50%);
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}

a.fancyButton:hover{
    color:rgba(255, 255, 255, 1);
    background-color:rgba(28, 190, 131, 1);
    background-position: -100% 100%;
}

标签： htmlcss

解决方案

添加此样式

.buttonsDiv{
  display: flex;
}


/*FancyButtonStuff*/
.buttonsDiv{
  display: flex;
}

.buttonContainer{
    margin-top:100px;
    text-align:center;
}

h4{
    color:rgba(69, 69, 69, 1);
    /*line-height:2em;*/
}

/* BUTTON CSS
------------------------------------------- */

a.fancyButton{
  display:inline-block;
    
    /*font:normal normal 300 1.3em 'Open Sans';*/
  font-size:0.8em;
    text-decoration:none;   
    
    color:rgba(28, 190, 131, 1);
    background-color:transparent;
    border:1px solid rgba(28, 190, 131, 1);
    border-radius:100px;
    
    padding: .3em 1.2em;
    margin:5px;
            
    background-size: 200% 100%; 
    background-image: linear-gradient(to right, transparent 50%, rgba(28, 190, 131, 1) 50%);
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}

a.fancyButton:hover{
    color:rgba(255, 255, 255, 1);
    background-color:rgba(28, 190, 131, 1);
    background-position: -100% 100%;
}


a.fancyButton2{
  display:inline-block;
    
    /*font:normal normal 300 1.3em 'Open Sans';*/
  font-size:0.8em;
    text-decoration:none;   
    
    color:rgba(28, 190, 131, 1);
    background-color:transparent;
    border:1px solid rgba(28, 190, 131, 1);
    border-radius:100px;
    
    padding: .3em 1.2em;
    margin:5px;
            
    background-size: 200% 100%; 
    background-image: linear-gradient(to right, transparent 50%, rgba(28, 190, 131, 1) 50%);
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}

a.fancyButton2:hover{
    color:rgba(255, 255, 255, 1);
    background-color:rgba(28, 190, 131, 1);
    background-position: -100% 100%;
}
<div class="buttonsDiv">
  <h4><a href="#" class="fancyButton">Button 1</a></h4>
  <h4><a href="#" class="fancyButton">Button 2</a></h4>
</div>

推荐阅读