首页 > 学习资料 > 技能分享 > 软件分享 > 表单元素如何紧贴布局?(坛友 沉默的轮回″分享 )

表单元素如何紧贴布局?(坛友 沉默的轮回″分享 )

1.jpg 
2.jpg 


如上两图,怎么把第一张图做成第二张图那种效果,即文本框与按钮贴在一起。

第一张图源码如下:

<div id="fm">
                <form action="search.jsp" method="get">
                        <input type="text" name="query" class="searchTextBox" autocomplete="off"/>
                        <input type="submit" value="搜一下" class="searchButton" />
                </form>
 </div>


相关的CSS样式:

body,div,form,p,input{
                margin:0;
                padding:0;
}

body{
        text-align:center;
}
#fm{
        margin:10px auto;
        padding:0;
}

.searchTextBox{
        border:1px solid #B6B6B6;
        outline:none;
        width:420px;
        height:30px;
        font:16px/22px arial;
        background:url("../img/Button.png") no-repeat -305px 0;
        padding-left:5px;
        padding-right:5px;
}

.searchButton{
        border-style:none;
        width:95px;
        height:32px;
        font-size:14px;
        cursor:pointer;
        background:url("../img/Button.png") no-repeat;
}

.searchButton:active{
        background-position:-100px 0;
}

我试过修改按钮的Margin-left属性为负值,可以实现,但是着实不理解这两个表单元素为何有中间的那个间隔?此外,这两个表单元素在竖直方向上没有对齐,文本框比按钮高了1px,但是如果在文本框的样式里添加vertical-align:bottom;他们就会竖直方向上对齐。搞不懂为什么。再次,文本框里的文本对齐方式,一般情况下看起来是竖直居中的,但是如果使用Ctrl+V粘贴进去内容,文本就会变成竖直向上对齐方式。如下图所示:
3.jpg 
4.jpg 

热门新闻