Question

如何在保持输入字段的灵活宽度并使其保持居中的同时将表格固定在页面底部的jsfiddle中？

我现在已经尝试了几个小时的代码......我一直希望能找到解决方案。

______________________________________________
|                                            |
|                                            |
|         [blank page until filled]          |
|                                            |
|                                            |
|    [flexible input field][fixed button]    |
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾

http://jsfiddle.net/nWCT8/1/

CSS

#searchbar {
position: fixed;
top: 20px;
left: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.input-wrapper {
position: absolute;
right: 110px;
left: 0px;
top : 0px;
bottom: 0px;
}

/* Form wrapper styling */
.form-wrapper {
position: relative;
left: 0px;
top: 0px;
width: 50%;
height: 37px;
display: inline-block;
}

.form-wrapper input {
height: 100%;
width: 100%;
padding: 8px 10px;
float: left;   
color: #1f1f9d;
border: 0;
background: #e6e6e6;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

/* Form submit button */
.form-wrapper button {
position: absolute;
right: 0px;
top: 0px;
overflow: visible;


border: 0;
padding: 0;
cursor: pointer;
height: 37px;
width: 104px;
color: #ffffff;
background: red;
}  


.form-wrapper button::-moz-focus-inner { /* remove extra button spacing Mozilla Firefox */
border: 0;
padding: 0;
}

HTML

    <div id="searchbar">
        <form class="form-wrapper">
            <div class="input-wrapper">
                <input type="text" placeholder="Input text here"/>
            </div>
            <button type="submit">Search</button>
        </form>
    </div>

Answer 1

更改#searchbar的位置，使其偏离bottom而不是top

#searchbar {
    bottom: 20px;
    ...
}

#searchbar {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.input-wrapper {
  position: absolute;
  right: 110px;
  left: 0px;
  top: 0px;
  bottom: 0px;
}
/* Form wrapper styling */

.form-wrapper {
  position: relative;
  left: 0px;
  top: 0px;
  width: 50%;
  height: 37px;
  display: inline-block;
}
.form-wrapper input {
  height: 100%;
  width: 100%;
  padding: 8px 10px;
  float: left;
  color: #1f1f9d;
  border: 0;
  background: #e6e6e6;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}
/* Form submit button */

.form-wrapper button {
  position: absolute;
  right: 0px;
  top: 0px;
  overflow: visible;
  border: 0;
  padding: 0;
  cursor: pointer;
  height: 37px;
  width: 104px;
  color: #ffffff;
  background: red;
}
.form-wrapper button::-moz-focus-inner {
  /* remove extra button spacing for Mozilla Firefox */
  border: 0;
  padding: 0;
}

<div id="searchbar">
  <form class="form-wrapper">
    <div class="input-wrapper">
      <input type="text" placeholder="Input text here" />
    </div>
    <button type="submit">Search</button>
  </form>
</div>

jsfiddle：http://jsfiddle.net/azizn/fmg7dzyp/

Answer 2

像这样：

http://jsfiddle.net/tobyl/L2jeepx0/1/

CSS补充道：

#searchbar {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

将形状固定到底部，以柔性宽度和固定按钮为中心

2 个答案: