时间戳

首页 > 解决方案 > 调整两个文本框宽度

css - 调整两个文本框宽度

问题描述

我是html表单设计器的初学者，我想input-group在html中做一个简单的，哪个文本框宽度不同的输出这意味着哪个姓氏文本框更短，而FullName更长你能 建议怎么做吗？

<div class="row h-100">
 <div class="col">
   <div class="input-group">
          <div class="input-group-prepend">
              <span class="input-group-text" id="">First and last name</span>
           </div>
           <input type="text" id="surname" class="form-control" style="width:80px">
           <input type="text" id="FullName" class="form-control" style="width:100%">
     </div>
  </div>

标签： cssbootstrap-4width

解决方案

试试这个。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row h-100">
  <div class="col">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="">First and last name</span>
      </div>
      <input type="text" id="surname" class="form-control" placeholder="Mr" style="width:80px;flex-grow: 0;">
      <input type="text" id="FullName" class="form-control" placeholder="">
    </div>
  </div>

推荐阅读