Html 如何编辑此代码段以便在同一行上显示按钮？

我发现，我想创造同样的东西，但与内联按钮。添加

display:inline

似乎不起作用，还会破坏视觉效果

这是HTML文件：

<h1>Material design buttons (CSS-only)</h1>

<h2>Material design buttons with a ripple effect. This is CSS-only so there is no mouse detection, the ripple effect always starts from the same point.</h2>

<button class="btn" type="button"><span>Button</span></button>

<button class="btn orange" type="button"><span>Medium-length button</span></button>

<button class="btn red" type="button"><span>Extra-long button to let you appreciate the effect.</span></button>

您还可以在我链接的代码笔上尝试该代码段

---

我应该如何进行？将按钮放在一行时有没有办法保持效果？

您可以使用

显示：内联块以执行此操作。使用
内联块时
将保留所需的间距特性，同时允许元素内联显示

您可以在上阅读有关内联块的更多信息

与display:inline相比，主要区别在于display:inline块允许在元素上设置宽度和高度

此外，使用display:inline块时，会考虑上下页边距/填充，而使用display:inline块时则不考虑上下页边距/填充

另一种方法是制作一个父包装，即
display:flex并根据需要使用对齐子项-但在本例中。案例一个简单的
display:inline块应该可以工作。
用display:flex将它们包装在一个容器中

<div class="btn-container">
    <button class="btn" type="button"><span>Button</span></button>

    <button class="btn orange" type="button"><span>Medium-length button</span></button>

    <button class="btn red" type="button"><span>Extra-long button to let you appreciate the effect.</span></button>
</div>

您可以尝试以下方法：

.btn {
  position: relative;

  display: block;
  margin: 30px auto;
  padding: 0;

  overflow: hidden;

  border-width: 0;
  outline: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);

  background-color: #2ecc71;
  color: #ecf0f1;

  transition: background-color .3s;
}

.btn:hover, .btn:focus {
  background-color: #27ae60;
}

.btn > * {
  position: relative;
}

.btn span {
  display: block;
  padding: 12px 24px;
}

.btn:before {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 0;
  padding-top: 0;

  border-radius: 100%;

  background-color: rgba(236, 240, 241, .3);

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn:active:before {
  width: 120%;
  padding-top: 120%;

  transition: width .2s ease-out, padding-top .2s ease-out;
}

/* Styles, not important */
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  position: relative;
  height: 100%;
}

body {
  position: absolute;
  top: 50%;
  left: 50%;

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  background-color: #ecf0f1;
  color: #34495e;
  font-family: Trebuchet, Arial, sans-serif;
  text-align: center;
}

h2 {
  font-weight: normal;
}

.btn.orange {
  background-color: #e67e22;
}

.btn.orange:hover, .btn.orange:focus {
  background-color: #d35400;
}

.btn.red {
  background-color: #e74c3c;
}

.btn.red:hover, .btn.red:focus {
  background-color: #c0392b;
}
.all-btn ul li{
  list-style: none;
  display: inline-block;
}




<h1>Material design buttons (CSS-only)</h1>

<h2>Material design buttons with a ripple effect. This is CSS-only so there is no mouse detection, the ripple effect always starts from the same point.</h2>
<div class="all-btn">
  <ul>
    <li><button class="btn" type="button"><span>Button</span></button></li>

    <li><button class="btn orange" type="button"><span>Medium-length button</span></button></li>

<li><button class="btn red" type="button"><span>Extra-long button to let you appreciate the effect.</span></button></li>
    <ul>
</div>

.btn{
位置：相对位置；
显示：块；
保证金：30像素自动；
填充：0；
溢出：隐藏；
边框宽度：0；
大纲：无；
边界半径：2px；
盒影：0 1px4pRGBA（0,0,0,6）；
背景色：#2ecc71；
颜色：#ecf0f1；
过渡：背景色。3s；
}
.btn:悬停，.btn:焦点{
背景色：#27ae60；
}
.btn>*{
位置：相对位置；
}
.btn跨度{
显示：块；
填充：12px 24px；
}
.btn:之前{
内容：“；
位置：绝对位置；
最高：50%；
左：50%；
显示：块；
宽度：0；
填充顶部：0；
边界半径：100%；
背景色：rgba（236240241.3）；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.btn:活动：之前{
宽度：120%；
填充顶部：120%；
过渡：宽度。2放松，填充顶部。2放松；
}
/*风格，不重要*/
*，*：之前，*：之后{
框大小：边框框；
}
html{
位置：相对位置；
身高：100%；
}
身体{
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
背景色：#ecf0f1；
颜色：#34495e；
字体系列：投石机，Arial，无衬线；
文本对齐：居中；
}
氢{
字体大小：正常；
}
.btn.orange{
背景色：#e67e22；
}
.btn.orange:悬停，.btn.orange:聚焦{
背景色：#d35400；
}
.btn.red{
背景色：#e74c3c；
}
.btn.red:悬停，.btn.red:焦点{
背景色：#c0392b；
}
.所有btn ul li{
列表样式：无；
显示：内联块；
}
材质设计按钮（仅CSS）
具有涟漪效果的材质设计按钮。这是CSS，所以没有鼠标检测，涟漪效应总是从同一点开始。

钮扣
中长按钮
超长按钮，让您欣赏效果

内联按钮是什么意思？这些按钮的显示设置为“内联”，或者，您希望以内联方式显示所有按钮。是。但是我认为我发布的CSS中有一些参数与此相冲突，但是按钮非常接近。我该如何把它们隔开一点呢？.btn类有余量：30px自动；如果“auto”是水平边距，只需将其更改为50px或任何您想要的按钮间距
.btn-container {
  display: flex;
}

.btn {
  position: relative;

  display: block;
  margin: 30px auto;
  padding: 0;

  overflow: hidden;

  border-width: 0;
  outline: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);

  background-color: #2ecc71;
  color: #ecf0f1;

  transition: background-color .3s;
}

.btn:hover, .btn:focus {
  background-color: #27ae60;
}

.btn > * {
  position: relative;
}

.btn span {
  display: block;
  padding: 12px 24px;
}

.btn:before {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 0;
  padding-top: 0;

  border-radius: 100%;

  background-color: rgba(236, 240, 241, .3);

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn:active:before {
  width: 120%;
  padding-top: 120%;

  transition: width .2s ease-out, padding-top .2s ease-out;
}

/* Styles, not important */
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  position: relative;
  height: 100%;
}

body {
  position: absolute;
  top: 50%;
  left: 50%;

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  background-color: #ecf0f1;
  color: #34495e;
  font-family: Trebuchet, Arial, sans-serif;
  text-align: center;
}

h2 {
  font-weight: normal;
}

.btn.orange {
  background-color: #e67e22;
}

.btn.orange:hover, .btn.orange:focus {
  background-color: #d35400;
}

.btn.red {
  background-color: #e74c3c;
}

.btn.red:hover, .btn.red:focus {
  background-color: #c0392b;
}
.all-btn ul li{
  list-style: none;
  display: inline-block;
}




<h1>Material design buttons (CSS-only)</h1>

<h2>Material design buttons with a ripple effect. This is CSS-only so there is no mouse detection, the ripple effect always starts from the same point.</h2>
<div class="all-btn">
  <ul>
    <li><button class="btn" type="button"><span>Button</span></button></li>

    <li><button class="btn orange" type="button"><span>Medium-length button</span></button></li>

<li><button class="btn red" type="button"><span>Extra-long button to let you appreciate the effect.</span></button></li>
    <ul>
</div>