css - 以响应方式显示表单的两个内联元素(调整大小)

Question

这是我第一次使用表单、CSS 和 HTML，我在尝试内联显示两个元素时遇到了麻烦，请记住它们必须覆盖窗口的所有宽度。例如

因此，假设您有以下内容:

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

我需要所有的输入来重新填充行中其他组件留下的空间。第一个fieldset有问题，因为100%是按照fieldset来的，所以留了这么长的空间。在第二种情况下，按钮的高度不一样......

你能帮帮我吗？提前致谢。

http://jsfiddle.net/o5L8yw1s/5/

Answer 1

编辑:

1. 在调整窗口大小时，搜索栏也会调整大小。
2. 使用 CSS 过渡添加了带动画的搜索按钮。

工作演示 Fiddle

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