Question

我正在尝试在固定宽度的内联块div旁边放置一个按钮。但它正好在div下面。我试过减小容器的宽度这是行不通的。我想在没有类添加按钮的情况下完成此操作。该按钮应位于.input-wrap div

旁边

以下是代码：

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 1

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

希望这有帮助。

Answer 2

好的，我能够通过删除.text-container来解决这个问题。然后我将input-wrap width属性移动到.round-process

＆＃13;

* {
    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: 200px;
    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;

}

.vertical-line {
    width: 1px;
    height: 40px;
    position: absolute;
    top: 0px;
    left: 150px;
    background-color: rgb(149, 152, 154);
}



.mb {
    font-weight: 800;
    color: rgb(149, 152, 154);
    position: relative;
    top: 11.5px;
    left: 10px;
}

.add {
    border-radius: 50%;
    border: none;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #57C48E;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 5px 30px, rgba(0, 0, 0, 0.2) 0px 1px 10px;
    background-color: white;
    vertical-align: top;
    margin-top: 5px;
    margin-left: 20px;

}

＆＃13;

 <div class="main">
      
        <div class="input-block">

            <div class="description">Total Memory</div>

            <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">&#10010;</button>
            <button class="add disabled">&#10010;</button>




        </div>
    </div>

＆＃13;

在内联块div旁边放置按钮

2 个答案: