css 顶部和margin-top没有影响较高-btn或较低-btn

nzrxty8p  于 2023-03-20  发布在  其他
关注(0)|答案(2)|浏览(106)

我似乎根本无法移动按钮。我试着在我能想到的每一个地方使用顶部、顶部边距和填充来调整它们的位置。没有任何东西能让它们移动。我试着调整容器和按钮组的flex属性,但每当我这样做时,所有东西都在移动。
我想将按钮组放置在右中的option 2-text(视频名称)下方。
以下是我一直关注的部分:

.container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  height: 200px;
}

.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: absolute;
  height: 200px;
}

.higher-btn,
.lower-btn {
  padding: 10px 20px;
  background-color: #000;
  border-radius: 100px;
  border: 2px solid #fff;
  font-size: 1.2em;
  margin-top: 10px;
  color: #fff;
  cursor: pointer;
  z-index: 1;
}
<div class="container">
  <div id="button-group">
    <button class="higher-btn">Higher</button>
    <button class="lower-btn">Lower</button>
  </div>
</div>

我不知道如何移动按钮元素。

roejwanj

roejwanj1#

“."用于类选择器,”#“用于ID选择器。

.button-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
position: absolute;
height: 200px;
}

此代码选择器替换为“#”。
示例:

#button-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
position: absolute;
height: 200px;
}
lawou6xi

lawou6xi2#

.button-group更改为#button-group,因为“."用于类选择器,”#“用于ID选择器。请注意,id必须是唯一的每个文档-您不能在一页中多次使用任何给定的ID。

.container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  height: 200px;
}

#button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: absolute;
  height: 200px;
}

.higher-btn,
.lower-btn {
  padding: 10px 20px;
  background-color: #000;
  border-radius: 100px;
  border: 2px solid #fff;
  font-size: 1.2em;
  margin-top: 10px;
  color: #fff;
  cursor: pointer;
  z-index: 1;
}
<div class="container">
  <div id="button-group">
    <button class="higher-btn">Higher</button>
    <button class="lower-btn">Lower</button>
  </div>
</div>

相关问题