Question

我需要在h2元素中有两个按钮元素，我希望两个按钮位于同一行，水平对齐而不是一个在另一个之上，标题和它们之间有一些空白但是我不想更改h2父显示或样式，我还能以其他方式实现这一目标吗？可能吗？

.btn {
  display: inline-block;
  padding: 8x 16px;
  cursor: pointer;
  transition: 500ms;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  line-height: inherit;
  background-color: transparent;
  border: 1px solid black;
  color: black;
  font-size: 16px;
  letter-spacing: 2px;
 }
 
 .btn--small {
   padding: 4px 16px;
 }

<h2 id="myId">Amazing title
  <div class="video" data-link="jksaj898" data-params="modestbranding=1&amp;am;showinfo=0&amp;vq=720&amp;color=white&amp;theme=light&amp;fs=1">
    <button class="play-button btn btn--small">
      <use xlink:href="#video-play">
      </use>WATCH IT
    </button>
  </div>
  <button class="btn btn--small">REGISTER</button>
 </h2>

.btn {
  display: inline-block;
  padding: 8x 16px;
  cursor: pointer;
  transition: 500ms;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  line-height: inherit;
  background-color: transparent;
  border: 1px solid black;
  color: black;
  font-size: 16px;
  letter-spacing: 2px;
  margin-top: 1em;
}

.btn--small {
  padding: 4px 16px;
}

.button-div {
  display:inline-flex;
}

<h2 id="myId">Amazing title
  <div class="button_div">
    <div class="video" data-link="jksaj898" data-params="modestbranding=1p;fs=1">
      <button class="play-button btn btn--small">
        <use xlink:href="#video-play">
        </use>WATCH IT
       </button>
     </div>
     <button class="btn btn--small">REGISTER</button>
  </div>
 </h2>

Answer 1

更改HTML并将两个按钮放在.video div。

中

＆＃13;

#myId {
  text-align: center;
}

.btn {
  display: inline-block;
  padding: 8x 16px;
  cursor: pointer;
  transition: 500ms;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  line-height: inherit;
  background-color: transparent;
  border: 1px solid black;
  color: black;
  font-size: 16px;
  letter-spacing: 2px;
  margin-top: 1em;
}

.btn--small {
  padding: 4px 16px;
}

＆＃13;

<h2 id="myId">Amazing title
  <div class="video" data-link="jksaj898" data-params="modestbranding=1&amp;am;showinfo=0&amp;vq=720&amp;color=white&amp;theme=light&amp;fs=1">
    <button class="play-button btn btn--small">
      <use xlink:href="#video-play">
      </use>WATCH IT
    </button>
    <button class="btn btn--small">REGISTER</button>
  </div>

</h2>

＆＃13;

Answer 2

FLoat ：float属性指定元素是否应该浮动。

只需在您的css

中添加float属性即可

.btn--small {
    float:left;
    padding: 4px 16px;
}

＆＃13;

	

I need to have two buttons elements inside an h2 element, I want the two buttons to be in the same line, aligned horizontally and not one above another, with some blank space between the title and them but I don't want to change the h2 parent display or styles, what other way can I achieve this? Is it possible?

.btn {
  display: inline-block;
  padding: 8x 16px;
  cursor: pointer;
  transition: 500ms;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  line-height: inherit;
  background-color: transparent;
  border: 1px solid black;
  color: black;
  font-size: 16px;
  letter-spacing: 2px;
 }
 
 .btn--small {
   padding: 4px 16px;
 }

<h2 id="myId">Amazing title
  <div class="video" data-link="jksaj898" data-params="modestbranding=1&amp;am;showinfo=0&amp;vq=720&amp;color=white&amp;theme=light&amp;fs=1">
    <button class="play-button btn btn--small">
      <use xlink:href="#video-play">
      </use>WATCH IT
    </button>
  </div>
  <button class="btn btn--small">REGISTER</button>
 </h2>

Full page

.btn {
  display: inline-block;
  padding: 8x 16px;
  cursor: pointer;
  transition: 500ms;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  line-height: inherit;
  background-color: transparent;
  border: 1px solid black;
  color: black;
  font-size: 16px;
  letter-spacing: 2px;
  margin-top: 1em;

}

.btn--small {
  float:left;
  padding: 4px 16px;
}

.button-div {
  display:inline-flex;
}

＆＃13;

<h2 id="myId">Amazing title
  <div class="video" data-link="jksaj898" data-params="modestbranding=1&amp;am;showinfo=0&amp;vq=720&amp;color=white&amp;theme=light&amp;fs=1">
    <button class="play-button btn btn--small">
      <use xlink:href="#video-play">
      </use>WATCH IT
    </button>
    <button class="btn btn--small">REGISTER</button>
  </div>

</h2>

＆＃13;

Answer 3

您可以在课程float: left

中使用或添加.btn

检查这个小提琴：wrap()

如何水平对齐两个按钮而不更改父级的显示样式

3 个答案: