使HTML输入元素大小相同
使HTML输入元素大小相同
提问于 2018-08-11 17:46:38
我有两个HTML容器，但是因为我有span元素，然后是文本输入(我想这就是问题所在)，我无法以我想要的方式获得容器中的内容。有没有办法在这些元素上增加边距或填充？或者有没有更简单的方法。在JSFiddle中，它们的跨度相当大，但我希望它们的大小约为下图所示。我使用的是bootstrap。
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>JSFIDDLE：https://jsfiddle.net/oy4u1sm9/4/
span格式化(当然，没有大跨度元素)
回答 2
Stack Overflow用户
发布于 2018-08-11 19:07:25
使用<span>标签作为标签不是最佳实践，因为它们是内联元素。尽量使用<label>标签。这里是您的代码调整，以匹配您想要的样式。在下面的小提琴中有更多的评论。
<div class="row mb-5">
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
</div>
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div>
</div>为了清楚起见，我在代码中做了一些注释。这就是了：
Stack Overflow用户
发布于 2018-08-12 01:18:29
您只是包含了错误的引导程序文件。尝试一下，看看你的问题是否得到了解决。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<!-- ROW 1 -->
<div class="row">
<div class="col" align="center">
<h2>TITLE</h2> </div>
<div class="col" align="center">
<h2>TITLE</h2></div>
</div> <!-- ROW 1 -->
<!-- ROW 2 -->
<div class="row">
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div> <!-- ROW 2 -->
<br>
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51798430
复制相关文章
相似问题
腾讯云开发者
