个人中心
gpt4 book ai didi

html - 将按钮放在内联 block div 旁边

转载 作者：行者123 更新时间：2023-11-28 02:39:58 28 4
gpt4 key购买 nike

我试图在固定宽度的内联 block div 旁边放置一个按钮。但它就在 div 的下面。我试过减少容器的宽度，但这是行不通的。我想在不将类添加按钮放在单独的容器中的情况下完成此操作。该按钮应位于 .input-wrap div 旁边

代码如下:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  color: rgb(149, 152, 154);
}

.input-block {
  margin-bottom: 40px;
}

.input-block>* {
  margin-bottom: 20px;
}

.description {
  display: block;
  font-size: 20px;
}

.radio-container {
  display: inline;
  margin-right: 30px;
}

.radio-container>input {
  margin-right: 10px;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
  left: -99999px;
}

[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: rgb(149, 152, 154);
}

[type="radio"]:checked+label::before,
[type="radio"]:not(:checked)+label::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 18px;
  height: 18px;
  border: 1px solid rgb(149, 152, 154);
  border-radius: 100%;
  background: transparent;
}

[type="radio"]:checked+label::after,
[type="radio"]:not(:checked)+label::after {
  content: "";
  width: 10.6px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: 4.5px;
  border-radius: 100%;
  transition: all 0.2s ease;
  background: rgb(149, 152, 154);
}

[type="radio"]:not(:checked)+label::after {
  opacity: 0;
  transform: scale(0);
}

[type="radio"]:checked+label::after {
  opacity: 1;
  transform: scale(1);
}

.round-process {
  width: 100%;
  height: 40px;
  border-radius: 15px;
  border: 1px solid rgb(149, 152, 154);
  text-align: left;
  color: darkgray;
  font-size: 20px;
  outline: none;
  padding-left: 15px;
  text-transform: capitalize;
  background: none;
}

input[type="number"] {}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.input-wrap {
  position: relative;
  width: 200px;
  /*    text-align: center;*/
  display: inline-block;
}

div.vertical-line {
  width: 1px;
  height: 40px;
  position: absolute;
  top: 0px;
  left: 150px;
  background-color: rgb(149, 152, 154);
}

.text-container {
  /*    width: 200px;*/
}

.mb {
  font-weight: 800;
  color: rgb(149, 152, 154);
  position: relative;
  top: 11.5px;
  left: 10px;
}

.add {
  border-radius: 50%;
  border: none;
  width: 20px;
  height: 20px;
  text-align: center;
  color: black;
  box-shadow: rgba(0, 0, 0, 0.117647) 0px 5px 30px, rgba(0, 0, 0, 0.2) 0px 1px 10px;
  background-color: white;
}

.add:active {
  box-shadow: rgba(0, 0, 0, 0.117647) 0px 5px 30px, rgba(0, 0, 0, 0.239216) 0px 0px 0px;
}

.add:focus {
  outline: 0px;
}
<html>

<body>
  <div class="main">
    <div class="input-block">
      <div class="description">Total Memory</div>
      <div class="text-container">
        <div class="input-wrap">
          <input class="round-process" maxlength="5" type="number">
          <div class="vertical-line" />
          <span class="mb">MB</span>
        </div>
        <button class="add">&times;</button>
      </div>
    </div>
  </div>
</body>

</html>

最佳答案

您的 html 中缺少结束标记。当您关闭这些标签时，按钮将与您的 div 的右下角对齐。当我像这样关闭 div 时它对我有用，

<body>
    <div class="main">
        <div class="input-block">
            <div class="description">Total Memory</div>
            <div class="text-container">
                <div class="input-wrap">
                    <input class="round-process" maxlength="5" type="number">
                    <div class="vertical-line" ></div>
                    <span class="mb">MB</span>
                </div>
                <button class="add">&times;</button>
            </div>
        </div>
    </div>
</body>

希望这对您有所帮助。

关于html - 将按钮放在内联 block div 旁边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47233454/

28 4 0
文章推荐： javascript - 分离折叠和未折叠的 bootstrap 4 导航栏菜单
文章推荐： html - Flexbox - 如何更改列的顺序？
文章推荐： javascript - 如何在修改后恢复图像的宽度和高度
文章推荐： c++ - 如何将元素定义为与随机访问迭代器指向的元素类型相同？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com