0
我想在固定宽度的嵌入块div旁边放置一个按钮。但它正好在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">×</button>
</div>
</div>
</div>
</body>
</html>
看来我在不知不觉中移除了一些必要的代码，张贴这个问题时。它已更新。谢谢 – scroobius
现在添加到按钮css {vertical-align：top; margin-top：10px}这将把它放在它旁边。 – devdob
不行不行。请注意我更新了问题 – scroobius