Question

我正在研究这段代码。我想在这个输入字段周围添加一些空格：

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

视觉效果：

如何在输入字段和表格之间添加一些空格？另外，如何在输入栏的第line行放置“按标题搜索”文本？

Answer 1

在输入式

之后添加边距

.input_style{
  margin-bottom:10px;
}

padding在元素内创建空间，边距在元素外部创建，因此您需要使用margin。

来到“按标题搜索”，在此使用line-height css，行高应该等于输入的高度

Answer 2

要在两个元素之间放置空格，请使用margin（这会在元素边框之外添加空格），而不是padding（这会在元素的边框内添加空格）。

要垂直对齐输入旁边的文本，请将其放在span元素内，并将以下CSS应用于span。

由于文本字段和跨度都是内联元素，因此它们在语义上都应放入容器（块级）元素中。这是应该将保证金应用于它的元素。

＆＃13;

.input_style {
    width: 260px;
    padding: 5px;
    padding-right: 40px;
    outline: none;
    border: 2px solid #999999;
    border-radius: 5px;
    background-color: #FBFBFB;
    background-repeat: no-repeat;
}

.theButton { 
    vertical-align: baseline;
}

div { margin-bottom: 30px;
      border:1px solid red; /* only here to show the layout */
}

＆＃13;

<div>
  <input type="text" id="search" class="input_style" >
  <button class="theButton">Search By Title</button>
</div>
<div>
  This is the next item in the flow of the document.
</div>

＆＃13;

解决此问题的另一种方法是简单地使按钮相同高度作为输入字段，然后对齐是不必要的，因为两个元素的高度相同：

＆＃13;

/* Note that this rule now applies to the input field and the button */
.input_style, .theButton {
    width: 260px;
    padding: 5px;
    padding-right: 40px;
    outline: none;
    border: 2px solid #999999;
    border-radius: 5px;
    background-color: #FBFBFB;
    background-repeat: no-repeat;
}

/* Now we just reset aspects of the button that are different
   from the input field  */
.theButton { 
    width:auto;
    border:0;
}

div { margin-bottom: 30px;
      border:1px solid red; /* only here to show the layout */
}

＆＃13;

<div>
  <input type="text" id="search" class="input_style" >
  <button class="theButton">Search By Title</button>
</div>
<div>
  This is the next item in the flow of the document.
</div>

＆＃13;

Answer 3

我会将整个块包装在div标签中。这样，您可以轻松控制表格周围的条纹和线高对齐。添加CSS

.my-form-wraper {
    /*set margins, padding, line-height, etc. here ^/
}

和HTML：

<div class='my-form-wraper'>
<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>
</div>

添加填充arround输入

3 个答案: