html - 模态内的边界问题-6ren

html - 模态内的边界问题

转载作者：太空宇宙更新时间：2023-11-03 20:26:21

25

4

我希望在我的模式中的“报价”按钮上方和下方有空间。我首先尝试在它的底部添加一个边框，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/Angular

<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>

最佳答案

执行以下操作以获得报价按钮和模式结束之间的空间:

在 slidecontainer 类上应用 padding-bottom。

.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，因此请更改其中一个 h2 元素的 id，其中 id 为 offer。

关于html - 模态内的边界问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53496246/

25

4

0

文章推荐： arrays - 基于重复字符位置创建数组的最简单方法

文章推荐： matlab - 在 matlab 中绘图，增加 X 轴上的划分数

文章推荐： matlab - 在matlab parfor循环中保存命令

angularjs - 什么是 Angular 态？
我来自 Asp.Net 世界，试图理解 Angular State 的含义。什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？我听到很多人
javascript - 3 态 CSS 拨动开关
我一直在寻找 3 态拨动开关，但运气不佳。基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。有人

首页

博学

6Ren·AI

商城

html - 模态内的边界问题