0
固定幅のインラインブロックdivの隣にボタンを配置しようとしています。しかし、それは部門の直下になります。私はこれが動作しないコンテナの幅を縮小しようとしました。私はクラスのボタンを別のコンテナに追加することなくこれを達成したいと思います。ボタンは.inputラップの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
Nopeは機能しません。ご質問ください – scroobius