Question

尝试通过将其与中心（垂直和水平）对齐来设置我的datalist样式，但我只能进行水平居中而不是垂直。

有没有办法增加datalist框的宽度并做一些样式。请帮忙..

＆＃13;

$('#btn').click(function() { // The `$` reference here is a jQuery syntax. So we are loading jquery right before this script tag
        var textval = $('#textcat').val();
        window.location = "1stlink.php?variable=" + encodeURIComponent(textval);
      });

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
    <div class="text-center">
    <input list="category" name="category" id="textcat" placeholder="Enter your area..">
    <datalist id="category">
      <option id="www.google.com" value="fruits" />
      <option id="www.fb.com" value="animals" />
      <option id="www.ymail.com" value="vechiles" />
      <option id="www.msn.com" value="ornaments" />
    </datalist>
    <input id="btn" type="button" value="submit">
  
    </div>
    </div>
    </div>

＆＃13;

Answer 1

在＆＃34;输入＆＃34;元素，您可以根据自己的喜好轻松调整元素宽度。

有关详细信息，请参阅此页面 https://www.w3schools.com/css/css_form.asp

＆＃13;

$('#btn').click(function() { // The `$` reference here is a jQuery syntax. So we are loading jquery right before this script tag
  var textval = $('#textcat').val();
  window.location = "1stlink.php?variable=" + encodeURIComponent(textval);
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="container">
  <div class="row" style="width: 100%; padding-top: 25%">
    <div class="col-md-6 col-md-offset-3">
      <div class="text-center">
        <input style="width: 100%" list="category" name="category" id="textcat" placeholder="Enter your area..">
        <datalist id="category">
          <option id="www.google.com" value="fruits" />
          <option id="www.fb.com" value="animals" />
          <option id="www.ymail.com" value="vechiles" />
          <option id="www.msn.com" value="ornaments" />
        </datalist>
        <input id="btn" type="button" value="submit">
      </div>
    </div>
  </div>

＆＃13;

Answer 2

要垂直对齐数据列表，请使用display: flex和align-items: center。请注意，您需要在容器上设置高度以垂直对齐其内容。

刚刚注意到你关于宽度的说明。要调整它，您可以使用datalist的id调整width属性。

Updated Fiddle

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
}

垂直和水平居中数据列表框及其按钮

2 个答案: