并排的 HTML 输入文本

Question

我一直在试图弄清楚如何使输入文本和输入按钮并排。不仅如此，我的text-align : center似乎没有申请文字输入。

我试图不添加多个空格只是为了缩进占位符。

我一直在尝试各种方法，但我仍然卡住： 代码笔：-

https://codepen.io/jayvicious/pen/dRyJKE HTML：

<div class="cell at-bottom">
      <input type="text" placeholder="All Japan Cities" class="formElement">
      <input type="text" placeholder="Check In Date" class="formElement">
      <input type="text" placeholder="Check Out Date" class="formElement">
      <select name="cars">
  <option value="Guest1">1 Guest</option>
  <option value="Guest2">2 Guest</option>
  <option value="Guest3">3 Guest</option>
  <option value="Guest4">4 Guest</option>
  <option value="Guest5">5 Guest</option>
</select>
      <input type="submit" value="Search" class="formElement">
    </div>

CSS：

input[type=text], select {
text-allign:center;  
padding: 12px 20px;
margin: auto;
display: inline-block;
border: 1px solid  #000000;

}

input[type=submit] {
    font-family: 'arial', sans-serif;
    background-color:white;
    text-align: center;
    color:red;
  padding: 14px 45px;
  margin: 8px 0;
  border: 1px solid  #000000;
  cursor: pointer;
}

.cell.at-bottom {
  height: 20px;
  padding: 20px;
}

我的预期输出应该是这样的：

编辑：中心问题已由 matthias gwiozda 修复 修复它的链接：Center HTML Input Text Field Placeholder

Answer 1

您的占位符问题是您将text-align 拼写为text-allign。如果要将所有文本设置为中心样式，则不需要 WebKit 集成。如果您只想将 placeholder 居中，则必须使用 WebKit 集成。

对于您的间距问题，请尝试将此块添加到您的 css：

select {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

（select 样式取自 SO answer）

我为修复间距所做的另一件事是将所有输入放入table，这似乎修复了它。

input[type=text],
select {
  text-align: center;
  padding: 12px 20px;
  margin: none;
  display: inline-block;
  border: 1px solid #000000;
}

input[type=submit] {
  font-family: 'arial', sans-serif;
  background-color: white;
  text-align: center;
  color: red;
  padding: 12.5px 45px;
  border: 1px solid #000000;
  cursor: pointer;
}

.cell.at-bottom {
  height: 20px;
  padding: 20px;
  border-collapse: collapse;
}

.cell.at-bottom td {
  padding: 0;
  margin: 0;
}

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
  background-position: 100% 50%;
  background-repeat: no-repeat;
  width: 90px;
}

<table class="cell at-bottom"><tr><td><input type="text" placeholder="All Japan Cities" class="formElement"></td><td><input type="text" placeholder="Check In Date" class="formElement"></td><td><input type="text" placeholder="Check Out Date" class="formElement"></td><td><select name="cars">
  <option value="Guest1">1 Guest</option>
  <option value="Guest2">2 Guest</option>
  <option value="Guest3">3 Guest</option>
  <option value="Guest4">4 Guest</option>
  <option value="Guest5">5 Guest</option>
</select></td><td><input type="submit" value="Search" class="formElement"></tr></table>

Answer 2

这是Center HTML Input Text Field Placeholder 的副本。

正如大卫所说，您可以使用“text-alalign”修复类型错误，或者如果您只想为占位符提供 Text-align，您可以使用：

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}

编辑： 以下解决方案仅适用于 Chroium 浏览器。所以它没用：

对于您的间距问题，您可以为输入字段的容器设置以下 Css：

.cell.at-bottom    {
display: inline-table;
}

Answer 3

我对您的 HTML 和 CSS 做了一些更改，应该可以解决问题。例如：

HTML：

<div class="cell at-bottom">
      <input type="text" placeholder="All Japan Cities" class="formElement">
      <input type="text" placeholder="Check In Date" class="formElement">
      <input type="text" placeholder="Check Out Date" class="formElement">
      <select name="cars" class="formElement">
  <option value="Guest1">1 Guest</option>
  <option value="Guest2">2 Guest</option>
  <option value="Guest3">3 Guest</option>
  <option value="Guest4">4 Guest</option>
  <option value="Guest5">5 Guest</option>
</select>
      <input type="submit" value="Search" class="formElement">
    </div>

CSS：

.cell{
  display: flex;
  align-content: flex-start;
}

.formElement{
  box-sizing: border-box;
  height: 46px;
  border: 1px solid  #000000;
  border-radius: 0px;
  text-align:center;
  padding: 12px 20px;
  flex-grow: 1;
  flex-basis: 100px;
}

input[type=submit] {
    font-family: 'arial', sans-serif;
    background-color:white;
    color:red;
  cursor: pointer;
}

.cell.at-bottom {
  height: 20px;
  padding: 20px;
}

关键的改变是使用 display: flex 作为你的 div 容器。从那里我对 .formElement 中的所有输入和选择元素进行分组，并在那里调整它们的大小。这使所有东西都保持相同的宽度、高度和对齐。