我正在处理这段代码。我想在此输入字段周围添加一些空间:
<span class="theSpan">
<h:inputText id="search" class="input_style" value="#{accounts.searchString}"></h:inputText>
<h:commandButton value="Search by title" action="#{bookBean.searchByTitle(accounts.searchString)}">
<f:ajax execute="search" render="output"></f:ajax>
</h:commandButton>
</span>
CSS:
.input_style {
width: 260px;
padding: 5px;
padding-right: 40px;
outline: none;
border: 2px solid #999999;
border-radius: 5px;
background-color: #FBFBFB;
/* font-family: Cambria, Cochin, Georgia, serif;*/
/* font-size: 16px;*/
/*background-position: 270px -10px;*/
/* background-image: url('http://www.kirupa.com/images/search.png');*/
background-repeat: no-repeat;
margin-bottom: 30px;
}
.theSpan {
vertical-align: baseline;
}
视觉效果:
如何在输入字段和表格之间添加一些空间?另外,如何将文本“按标题搜索”放置在带有输入字段的行中?
最佳答案
在输入样式后添加边距
.input_style{
margin-bottom:10px;
}
padding creates space inside the element and margin creates outside the element so you need to use margin.
“按标题搜索”在此使用 line-height
css,line-height 应等于输入的高度
关于css - 在输入周围添加填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36452619/