Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/74.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/38.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 将块元素放置为与表单元素内联的链接_Html_Css - Fatal编程技术网

Html 将块元素放置为与表单元素内联的链接

Html 将块元素放置为与表单元素内联的链接,html,css,Html,Css,我正在尝试构建一个可以动态添加条件的搜索 我正在使用Bootstrap,到目前为止它是这样的(HTML呈现) 问题是,我希望在每行标准的末尾显示加号和减号链接,如下所示: 我的代码: a.addremove{ display:block; background-color: #4B5E75; color: #fff; margin: 0; width: 32px; height: 32px; font-size:16px; text-align: cent

我正在尝试构建一个可以动态添加条件的搜索

我正在使用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">
     ........
a.addremove{
显示:块;
背景色:#4B5E75;
颜色:#fff;
保证金:0;
宽度:32px;
高度:32px;
字体大小:16px;
文本对齐:居中;
线高:38px;
边界半径:50%;
}
标题
学习目标
单位
历年
年
主题
类型
人
是
不是
包括
排除
添加
........
什么是最好的方式来实现这一点,同时保留块级的圆形造型,我已经为这些链接进行

试试看

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

而不是
显示:块使用
显示:内联块

使元素显示内联块

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

这就把它放在了行的开头,在输入字段之前。我想我可以通过使每一行的位置:绝对,然后使a绝对(右:0…)来实现,但感觉不对,谢谢。我以为我试过了!显然不是。我早该知道的。