gpt4 book ai didi

html - 如何使字段对齐?

转载 作者:太空宇宙 更新时间:2023-11-03 21:19:52 26 4
gpt4 key购买 nike

如何对齐输入字段标题和文本,使它们与标签位于同一行?我需要额外的 div 因为我正在制作一个需要动态字段的表单。我的问题是无论我做什么,输入框都会出现在下一行。

<html>

<head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">

<style>
textarea {
height: 600px !important width: 500 px !important
}
</style>

</head>

<body>

<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">

<span class="ui two column grid">

<div class="row">
<div class="two wide column">

<div class="field">
<label>Category</label>

</div>

</div>
<div class="column field">

<div class="inline field" id="type_container">
<input type="radio" name="type" value="s">
<label>A</label>
<input type="radio" style="margin-left: 25px;" name="type" value="k">
<label>B</label>
</div>

</div>
</div>

<div style="display: block;" id="category_contents" class="maintext">

<div class="row">
<div class="two wide column">

<div class="field">
<label>Title</label>

</div>

</div>
<div class="column field">
<input type="text" name="title" placeholder="Title">

</div>

</div> <div class="row">

<div class="two wide column">

<div class="field">

<label>Text</label>

</div>

</div>
<div class="column field">
<input type="text" name="data" placeholder="Test">

</div>

</div>
</div>

</body>
</html>

最佳答案

在你的 div 上使用 display: inline-block;

<html>

<head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">

<style>
textarea {
height: 600px !important width: 500 px !important
}
.inline {display: inline-block;}
</style>

</head>

<body>

<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">

<span class="ui two column grid">

<div class="row">
<div class="two wide column">

<div class="field">
<label>Category</label>

</div>

</div>
<div class="column field">

<div class="inline field" id="type_container">
<input type="radio" name="type" value="s">
<label>A</label>
<input type="radio" style="margin-left: 25px;" name="type" value="k">
<label>B</label>
</div>

</div>
</div>

<div style="display: block;" id="category_contents" class="maintext">

<div class="row">
<div class="two wide column inline">

<div class="field">
<label>Title</label>

</div>

</div>
<div class="column field inline">
<input type="text" name="title" placeholder="Title">

</div>

<div class="two wide column">

<div class="field">
<label>Text</label>

</div>

</div>
<div class="column field">
<input type="text" name="data" placeholder="Test">

</div>

</div>
</div>

</body>
</html>

我使用内联类向您展示了您的第一个文本输入

关于html - 如何使字段对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38439348/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com