gpt4 book ai didi

html - 如何通过html对齐标签和文本框?

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

使用以下代码,摘要及其文本框内联对齐。但是描述文本框出现在标签“描述”下方。我怎样才能让它对齐内联?请帮我解决这个问题。

    .left {
width: 30%;
float: left;
text-align: right;
}
.right {
width: 65%;
margin-left: 10px;
float: left;
}
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
<h1 class="text-center" style="font-family:Colonna MT;font-size:50px;color:ForestGreen ;">Post Your Ad</h1>
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description" style="height:100px;width:400px">
</div>
</form>
</div>
</div>
</div>

最佳答案

像这样尝试: Demo

如果需要多行text盒子,使用 textarea而不是输入类型 text

    <div class="form-group row">
<label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Summary</label>
<div class="col-md-6 col-sm-12">
<input type="text" class="form-control" name="Summary" size="50">
</div>
</div>

<div class="form-group row">
<label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Description</label>
<div class="col-md-6 col-sm-12">
<textarea class="form-control" name="Description"></textarea>
</div>
</div>

编辑:

如您所述,它不是 form-control类(class),它的form-control-label .. 您可以获得更多信息 here

已更新 Demo : 要更改高度,请尝试更改 rows="8" 的值对于 <textarea>

关于html - 如何通过html对齐标签和文本框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35767514/

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