[分享]css两行按钮变成一行

在网页设计过程中，有时我们需要在一行内显示多个按钮，这时候就需要用到CSS来实现了。下面我们来介绍一种CSS技巧，可以将两行按钮变成一行。.btn { display: inlineblock; ma...

在网页设计过程中，有时我们需要在一行内显示多个按钮，这时候就需要用到CSS来实现了。下面我们来介绍一种CSS技巧，可以将两行按钮变成一行。

.btn {
  display: inline-block;
  margin: 10px;
  padding: 10px 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 16px;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .btn {
    display: block;
    width: 100%;
    margin: 10px 0;
  }
} 

首先，我们给按钮添加一个通用的样式，包括边框、背景、字体大小等等。

接着，使用@media查询对不同的屏幕尺寸设置不同的样式。当屏幕宽度小于等于768px时，将按钮的display属性设置为block，这样就可以实现将两行按钮变成一行了。

通过这种CSS技巧，我们可以优化网页上的按钮布局，使用户在不同的设备上都能够更加方便地使用。