我试图在固定宽度的内联 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">×</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">×</button>
</div>
</div>
</div>
</body>
希望这对您有所帮助。
关于html - 将按钮放在内联 block div 旁边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47233454/