Question

我希望模态中“报价”按钮的上方和下方都有空间。我首先尝试在其底部添加一个边框（30像素），但没有显示出来。模态的结尾位于按钮的结尾正下方，两者之间没有空格。

CSS

.slidecontainer {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

h2 {
  padding-top: 10px;
  padding-bottom: 10px;
}

#offerButton {
  border-bottom: 30px;
}

#inline {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}

#text1 {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

HTML /英语

<body>
  <div id="text1">
    <h2 class="text-center" id="offer">Offer: <span>${{offerVal}}</span></h2>
    <h2 class="text-center" id="offer">Price: <span>${{price}}</span></h2>
  </div>

  <div class="slidecontainer text-center">
    <input type="range" min={{min}} max={{max}} class="slider" id="myRange" [(ngModel)]="offerVal" name="slider">
  </div>
  <div class="text-center">
    <button class="btn btn-success btn-sm" type="button" id="offerButton" (click)="offer()">  Offer  </button>
  </div>
</body>

Answer 1

执行以下操作以在要约按钮和模式结束之间留出空间：

在padding-bottom类上应用slidecontainer。

.slidecontainer {
    width: 100%;
    padding: 0 20px 30px 20px;
}

将“报价”按钮放在应用了课程slidecontainer的div内。

<div class="slidecontainer text-center">
    <input type="range" min={{min}} max={{max}} class="slider" id="myRange"
           [(ngModel)]="offerVal" name="slider">
    <div>
        <button class="btn btn-success btn-sm" type="button" id="offerButton"
            (click)="offer()">  Offer
        </button>
    </div>
</div>

不要在按钮上应用border-bottom不会解决您的问题。

此外，您不能在两个不同的元素上使用相同的ID，因此请更改ID为提供的h2元素之一的ID。

Answer 2

不是在 offerButton 处添加边框底线，而是在ID offerButton 中添加边距并且，如果您只想指定空间的顶部和底部，请添加margin-top和margin-bottom

#offerButton {
  margin: 30px;
}

<body>
  <div id="text1">
    <h2 class="text-center" id="offer">Offer: <span>${{offerVal}}</span></h2>
    <h2 class="text-center" id="offer">Price: <span>${{price}}</span></h2>
  </div>

  <div class="slidecontainer text-center">
    <input type="range" min={{min}} max={{max}} class="slider" id="myRange" [(ngModel)]="offerVal" name="slider">
  </div>
  <div class="text-center">
    <button class="btn btn-success btn-sm" type="button" id="offerButton" (click)="offer()">  Offer  </button>
  </div>
</body>

模态内的边界问题

2 个答案: