这是我第一次使用表单,CSS和HTML,并且我在尝试显示两个内联元素时遇到了麻烦,请记住它们必须覆盖窗口的所有宽度。 E.g。
因此,假设您有以下内容:
<form>
<fieldset>
<label>Username:</label>
<input> </input>
</fieldset>
<fieldset>
<label>URL:</label></br>
<input id="url" type="url" placeholder="wikipedia.org" required>
<button id="btnBrowse" type="submit"></button>
</fieldset>
</form>
这种风格:
input {
background: orange;
position: absolute;
float: left;
width: 80%;
}
#btnBrowse {
height: 2em;
width: 2em;
background: url('http://www.endlessicons.com/wp-content/uploads/2012/12/search-icon-614x460.png') no-repeat left top, orange !important;
background-size: cover !important;
float: right;
}
我需要所有输入来重新填充该行中剩余的其他组件的空间。在第一个字段集中存在一个问题,因为100%是根据字段集,所以它对于左侧空间来说太长了。在第二种情况下,按钮的高度不同......
你能帮助我吗? 提前致谢。答案 0 :(得分:1)
修改
HTML:
<div id="container">
<div class="box1">
<fieldset>
<label>Username:</label>
<input type="text" class="textbox" placeholder="Enter your Username"></input>
</fieldset>
<div class="box2">
<fieldset>
<label>Url:</label>
<input id="url" type="url" class="textbox" placeholder="http://www.example.com/"></input>
<button id="searchBtn" class="searchBtn active" type="submit"></button>
</fieldset>
</div>
</div>
CSS:
#container {
position: relative;
top: 10px;
height: 55px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
font-family:"Trebuchet MS", Helvetica, sans-serif;
font-size: 17px;
color: black;
overflow: visible;
}
.box1, .box2 {
height: 55px;
vertical-align: top;
display: inline-block;
*display: inline;
border-radius: 25px;
}
.box1 {
background: #ccb;
width: 35%;
overflow: hidden;
}
.box2 {
background: #ccb;
width: 60%;
top: 0px;
overflow: hidden;
}
label {
border-radius: 15px;
position: relative;
margin: 10px;
margin-right: 0px;
padding: 7px;
overflow: hidden;
display: inline-block;
background-color: #aa9;
}
input {
color: #ccc;
font-size: 14px;
text-align: center;
position: relative;
width: 230px;
top: 12px;
height: 27px;
vertical-align: top;
display: inline-block;
*display: inline;
border-radius: 25px;
}
#url {
width: 400px;
}
button.searchBtn:hover {
transform: scale(1.35);
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
button.searchBtn {
display: inline-block;
position: relative;
top: -27px;
background: url('http://s25.postimg.org/6cosx3023/search.png') no-repeat scroll 0% 0% transparent;
width: 22px;
height: 22px;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
button:focus {
outline: medium none;
}
button.active, button:hover {
outline: 0px none;
opacity: 0.5;
}
button:hover {
opacity: 1;
outline: 0px none;
outline-width: 0px;
outline-style: none;
outline-color: -moz-use-text-color;
}
button {
cursor: pointer !important;
border: medium none;
outline: 0px none;
text-decoration: none;
font-family:"calibri_light-webfont";
font-size: 1.8em;
opacity: 0.2;
}
答案 1 :(得分:-1)
将div放置在相对于包装div的位置设置为绝对的位置时,应该从正确的方向开始...对不起模糊,我在堆栈交换移动中并且很难写出详细的答案。我可以在我回到计算机时进行阐述,尽管在此之前其他人更有可能回答。
答案 2 :(得分:-1)
我建议您在表单中使用<div>
。例如,创建一个包装器/容器,将其设置为您的首选项样式,然后在该包装器/容器中创建2 <div></div>
标记。
<强> HTML:
<div id="container">
<div class="lefty">
<form>
<fieldset>
<label>Username:</label>
<input> </input>
</fieldset>
</div>
<div class="righty">
<fieldset>
<label>URL:</label>
<input id="url" type="url" placeholder="wikipedia.org" required>
<button id="btnBrowse" type="submit"></button>
</fieldset>
</form>
</div>
</div>
<强> CSS
input {
background: orange;
position: absolute;
width: 30%;
float: left;
}
#container {
min-width: 960px;
width: 100%;
margin: auto;
}
.lefty {
min-width 300px;
width: 48%;
float: left;
}
.righty {
min-width 300px;
width: 50%;
float: right;
}
#btnBrowse {
max-width:30px;
height: 2em;
width: 10%;
background: url('http://www.endlessicons.com/wp-content/uploads/2012/12/search-icon-614x460.png') no-repeat left top, orange !important;
background-size: cover !important;
float: right;
}
答案 3 :(得分:-1)
如果您确实支持IE8 +,则可以使用display: table
实现此目的。标记:
<div class="input-container">
<label for="input">Name</label>
<input id="input" type="text" placeholder="Enter name">
<span>Submit</span>
</div>
和样式:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.input-container {
display: table;
}
.input-container label,
.input-container input,
.input-container span {
height: 30px;
display: table-cell;
}
.input-container input {
width: 100%;
}
.input-container label,
.input-container span {
padding: 5px 10px;
width: 1%;
border: 1px solid;
}
示例是here