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

时间:2014-08-28 02:44:22

标签: css

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

enter image description here

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

<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%是根据字段集,所以它对于左侧空间来说太长了。在第二种情况下,按钮的高度不同......

你能帮助我吗? 提前致谢。

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

4 个答案:

答案 0 :(得分:1)

修改

  1. 在窗口调整大小时,搜索栏会调整大小。
  2. 使用CSS过渡添加了带动画的搜索按钮。
  3. 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;
    }
    

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