Question

老实说，是否可以使用CSS3和HTML5？

我正在尝试使用的属性附加多个输入 float:left

但这是我面临的挑战： -

每当宽度和高度发生变化时，输入都会变得混乱。是否可以将输入固定在图像的中心？

输出应该是以下内容：

我尝试了多种方式，所以现在我正在使用这种表方法：

HTML：

<section id="offer"> 
<table WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<tr>
<td WIDTH="100%">
<div class="fixedimage">
<img src="Projects/Sojo/Documentation/Slice/01_Home/banner.png" />
      <input type="text" id="formElement">
</div>    
</td>
</tr>
</table>
  </section>

CSS：

#offer {
    font-family: 'Montserrat', sans-serif;
    clear: both;
    background-color: rgba(246,246,246,1.00);
    color: rgba(146,146,146,1.00);
    padding-top: 57px;
    padding-bottom: 57px;
}

.fixedimage img{
    width:100% !important;
    height:100%;
    display:block;    
}

#formElement
{
    position:absolute;
    top:600px;
    left:25px;
}

我在表单元素上使用top和left来表示响应。因此，当宽度小于540px时，我将覆盖高度和宽度。

我的codepen IO：https://codepen.io/jayvicious/pen/bRGWyx

我对批评者和建议持开放态度。如果有比使用当前表格方法更好的方法，我都是耳朵。

Answer 1

您可以使用Flexbox，因为它是垂直中心内容的完美选择，并将其与background-image CSS属性结合使用：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  
  min-height: 80vh;
  
  background: url('http://www.hotelstanchini.com/wp-content/uploads/2016/03/tessera-1400x529.jpg');
  background-size: cover;
}

.search-form {
  display: flex;
  padding: 16px;
}

.search-form input {
  flex: 1;
  width: 100%;
}

<div class="container" >
  <form class="search-form" >
    <input type="text" placeholder="All Japan Cities" />
    <input type="text" placeholder="Check In Date" />
    <input type="text" placeholder="Check Out Date" />
    <input type="text" placeholder="One Guest" />
    <input type="submit" />
  </form>
</div>

您可以阅读more about flexbox here。

Answer 2

我希望了解你的意图。以下是另一种选择。

我更改了代码，现在图片宽度为50％。

/* reset */
* {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}
/* styles */
.hero_wrap {
  position: relative;
  text-align: center;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.hero_img {
  width: 50%;
}
.hero_over {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  bottom: 20px;
}
.controls_list {
  text-align: center;
}
.hero_over li {
  text-align: left;
  display: inline-block;
}

<div class="hero_wrap">
  <img class="hero_img" src="http://www.hotelstanchini.com/wp-content/uploads/2016/03/tessera-1400x529.jpg" />
  <div class="hero_over">
    <ul class="controls_list">
      <li><input type="text"></li>
      <li><input type="text"></li>
      <li><input type="text"></li>
    </ul>
  </div>
</div>

Answer 3

尝试添加以下样式：

.fixedimage {
 position:relative;
 text-align:center;
 }

#formElement
{
position:absolute;
top:50%;
}

如果你想对你的元素使用position：absolute（父元素的绝对定位），你应该为它的父元素定义position：relative。要使元素居中，您需要添加顶部：50％。同样对于水平居中，您可以在父元素上添加text-align：center。

你也不需要表格元素。

Answer 4

尝试使用此css代码：

.fixedimage {
 position:relative;
}
#formElement{
position:absolute;
display:block;
top:0;
left:0;
right:0;
margin:50% auto 0 auto;
}

Answer 5

由于Flexbox在旧浏览器上使用前缀属性可能会很棘手，因此您可能会发现这很有用，使用display: table

与绝对定位相比，它简单且完全响应。

Fiddle demo

Stack snippet

html, body {
  margin: 0;
  height: 100%;
}
#offer {
  display: table;
  width: 100%;
  height:100%;
  font-family: 'Montserrat', sans-serif;
  background-color: rgba(246,246,246,1);
  color: rgba(146,146,146,1);
  background: url(http://www.hotelstanchini.com/wp-content/uploads/2016/03/tessera-1400x529.jpg);
  background-size: cover;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.cell.at-bottom {
  height: 20px;
  padding: 20px;
}
.cell div {
  display: inline-block;
  position: relative;
  padding: 20px;
  background: rgba(255,255,255,0.3)
}
.cell div * {
  position: relative;
  color: black;
  margin: 5px;
}

<section id="offer">
  <div class="row">
    <div class="cell">
      <div>
        <h1>EXPERIENCE</h1>
        <h5>The moder home of Japan</h5>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell at-bottom">
      <input type="text" class="formElement">
      <input type="text" class="formElement">
      <input type="text" class="formElement">
    </div>
  </div>
</section>

一个背景上的HTML5多输入

5 个答案: