Question

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

我试图不添加多个空格来缩进占位符。

我一直在尝试各种方式，但我仍然陷入困境： Codepen： -

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，这似乎解决了这个问题。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

正如大卫提到的，你可以用“text-allign”修复类型错误，或者如果你只想给你的占位符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做了一些改进，应该可以解决这个问题。 e.g：

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;
}

关键的变化是对div容器使用display：flex。从那里我将所有输入和选择元素分组在.formElement中并在那里调整它们的大小。这样可以保持所有宽度，高度和线条相同。

HTML输入文本并排

3 个答案: