如何调整选择文本?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何调整选择文本?相关的知识,希望对你有一定的参考价值。

我必须减少表单字段的高度,它在除了被破坏的select选项之外的所有字段上都能正常工作。如果有一种方法可以将选项文本向上移动,这似乎是一个很好的解决方案。 https://jsfiddle.net/04uv38e7/

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style type="text/css">
      .row.form {
        display: flex;
        justify-content: center;
      }
      .form-control {
       height: 28px;
      }
      h5 {
        color: black;
      }
    </style>
    <title></title>
  </head>
  <body>
<div class="form-wrap"> 
<div class="container-outer">
  <div class="container">
      <div class="row">
          <div class="col-sm-12 text-center">
          <h5>Book A Trip</h5>
      </div>
    </div>
    <form>
      <div class="row form">
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <input type="text" class="form-control" placeholder="First name">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
       <input type="text" class="form-control" placeholder="Last name">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <input type="text" class="form-control" placeholder="Email">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <select class="form-control input-sm">
          <option>Select property type</option>
          <option>Villa</option>
          <option>Plot</option>
        </select>
      </div>
      <div class="btndiv col-12 col-sm-12 col-md-2">
        <button class="btn">Submit</button>
      </div>
    </div>
    </form>    
  </div> <!-- container end -->
</div> <!-- outer container end -->
</div> <!-- wrapper -->
    <!-- Optional javascript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
答案

style="padding:0 7px 3px"添加到<select>标签。

如你看到的:

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <style type="text/css">
      .row.form {
        display: flex;
        justify-content: center;
      }
      .form-control {
       height: 28px;
      }
      h5 {
        color: black;
      }
    </style>
    <title></title>
  </head>
  <body>
<div class="form-wrap"> 
<div class="container-outer">
  <div class="container">
      <div class="row">
          <div class="col-sm-12 text-center">
          <h5>Book A Trip</h5>
      </div>
    </div>
    <form>
      <div class="row form">
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <input type="text" class="form-control" placeholder="First name">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
       <input type="text" class="form-control" placeholder="Last name">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <input type="text" class="form-control" placeholder="Email">
      </div>
      <div class="col-6 col-sm-6 col-md-2 form-group">
        <select class="form-control input-sm" style="padding:0 7px 3px">
          <option >Select property type</option>
          <option>Villa</option>
          <option>Plot</option>
        </select>
      </div>
      <div class="btndiv col-12 col-sm-12 col-md-2">
        <button class="btn">Submit</button>
      </div>
    </div>
    </form>    
  </div> <!-- container end -->
</div> <!-- outer container end -->
</div> <!-- wrapper -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

以上是关于如何调整选择文本?的主要内容,如果未能解决你的问题,请参考以下文章

如何在文本区域标签中的特定光标位置插入选择标签下拉值作为文本片段?

如何从设置中获取数据并发送到此片段

如何调整选择文本?

word文本框中如何调行间距

如何调整 iOS 选择器轮以生成随机索引

cdr调整文本框行距?