将输入和按钮放在一行

Question

我有一个html和一个css文件。

main {
flex: 1 1 0%;
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.list-lists {
padding: 1rem;
}
.list-lists h2 {
font-size: 1.5rem;
font-weight: 300;
color: var(--grey);
margin-bottom: 1rem;
}
#lists .single-list {
display: flex;
justify-content: space-between;
background-color: var(--darkest);
padding: 1rem;
border-radius: 1rem;
margin-bottom: 1rem;
}
#lists .single-list .f {
display: inline
}
.single-list .f .content {
flex: 1 1 0%;
}
.single-list .f .content .text {
color: var(--light);
font-size: 1.125rem;
width: 100%;
display: block;
transition: 0.4s;
}
.single-list .f .content .text:not(:read-only) {
color: var(--pink);
}
.single-list .f .actions {
display: flex;
margin: 0 -0.5rem;
}
.single-list .f .actions button {
cursor: pointer;
margin: 0 0.5rem;
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase;
transition: 0.4s;
}
.single-list .f .actions button:hover {
opacity: 0.8;
}
.single-list .f .actions button:active {
opacity: 0.6;
}
.single-list .f .actions .edit {
background-image: linear-gradient(to right, var(--pink), var(--purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.single-list .f .actions .delete {
color: crimson;
}

<main>
<section class="list-lists">
<div id="lists">
<div class="single-list">
<form class="f" method="POST" action="">
<div class="content">
<input type="text" class="text" value="Hi" readonly>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</form>
</div>
</div>
</section>
</main>

问题是页面末尾的输入和按钮显示在不同的行上。

我希望它们在同一行

image: what I want

通过删除表单标签并在css文件中删除其引用而获得的第二张图像的结果。但是我需要保存它。

Answer 1

将inline-block设置为元素actions和content，将它们放在一行中:

.single-list .f .actions {
/* display: flex; */ 
margin: 0 -0.5rem;
}
.content, .actions {
display: inline-block;
}

main {
flex: 1 1 0%;
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.list-lists {
padding: 1rem;
}
.list-lists h2 {
font-size: 1.5rem;
font-weight: 300;
color: var(--grey);
margin-bottom: 1rem;
}
#lists .single-list {
display: flex;
justify-content: space-between;
background-color: var(--darkest);
padding: 1rem;
border-radius: 1rem;
margin-bottom: 1rem;
}
#lists .single-list .f {
display: inline;
}
.single-list .f .content {
flex: 1 1 0%;
}
.single-list .f .content .text {
color: var(--light);
font-size: 1.125rem;
width: 100%;
display: block;
transition: 0.4s;
}
.single-list .f .content .text:not(:read-only) {
color: var(--pink);
}
.single-list .f .actions {
/* display: flex; */
margin: 0 -0.5rem;
}
.single-list .f .actions button {
cursor: pointer;
margin: 0 0.5rem;
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase;
transition: 0.4s;
}
.single-list .f .actions button:hover {
opacity: 0.8;
}
.single-list .f .actions button:active {
opacity: 0.6;
}
.single-list .f .actions .edit {
background-image: linear-gradient(to right, var(--pink), var(--purple));
/*-webkit-background-clip: text;*/
-webkit-text-fill-color: transparent;
}
.single-list .f .actions .delete {
color: crimson;
}
.content,
.actions {
display: inline-block;
}

<main>
<section class="list-lists">
<div id="lists">
<div class="single-list">
<form class="f" method="POST" action="">
<div class="content">
<input type="text" class="text" value="Hi" readonly />
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</form>
</div>
</div>
</section>
</main>