0

我正在尝试构建一个搜索，您可以在其中动态添加条件。

我正在使用 Bootstrap，这就是它到目前为止的样子（呈现 HTML）

在此处输入图像描述

问题是我希望加号和减号链接显示在每行标准的末尾，如下所示：

在此处输入图像描述

我的代码：

 a.addremove{
   display:block;
  background-color: #4B5E75;
  color: #fff;
  margin: 0;
  width: 32px;
  height: 32px;
  font-size:16px;
  text-align: center;
  line-height: 38px;
  border-radius: 50%;
}


  <form class="span10 offset1 custom-form">    
      <div class="control-group">
          <div class="controls">
              <select class="field">
                 <!-- <option disabled selected>Choose a Field</option>-->
                  <option value="title">Title</option>
                  <option value="lo">Learning Objectives</option>
                  <option value="unit">Unit</option>
                  <option value="cal_year">Calendar Year</option>
                  <option value="year">Year</option>
                  <option value="theme">Theme</option>
                  <option value="type">Type</option>
                  <option value="person">Person</option>
             </select>

           <select>
                  <option value="contains">Is</option>
                  <option value="lo">Is Not</option>
                  <option value="Includes">Includes</option>
                  <option value="Excludes">Excludes</option>
             </select>

            <span class="value">
             <input type="text"  placeholder="Keyword">
             </span>

             <a class="ss-icon addremove add">add</a>
          </div>

  <div class="control-group">
          <div class="controls">
     ........

在保留我为这些链接进行的块级圆形样式的同时实现这一目标的最佳方法是什么？

4

3 回答 3

0

尝试

a.addremove{
   display:block;
  float:left;
  background-color: #4B5E75;
  color: #fff;
  margin: 0;
  width: 32px;
  height: 32px;
  font-size:16px;
  text-align: center;
  line-height: 38px;
  border-radius: 50%;
}
于 2013-07-24T03:00:30.833 回答
0

而不是display: block;使用display: inline-block;

于 2013-07-24T03:09:10.630 回答
0

使元素显示inline-block；

a.addremove{
      display: inline-block;
      vertical-align: top; /* or middle */
      background-color: #4B5E75;
      color: #fff;
      margin: 0;
      width: 32px;
      height: 32px;
      font-size:16px;
      text-align: center;
      line-height: 38px;
      border-radius: 50%;
}
于 2013-07-24T03:09:42.597 回答