將塊元素與表單元素內聯一個鏈接

我試圖建立一個搜索，您可以在其中動態添加條件。將塊元素與表單元素內聯一個鏈接

我使用的引導，這是它的外觀至今（HTML渲染）

enter image description here

的問題是，我想加號和減號鏈接到的每一行的末尾顯示標準像這樣：

enter image description here

我的代碼：

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"> 
    ........

實現這一目標的最佳方式是什麼，同時保留塊級別的圓形樣式我正在進行這些鏈接？

來源

2013-07-24 Quad6

代替display: block;使用display: inline-block;

來源

2013-07-24 03:09:10 Samurai

謝謝。我以爲我試過了！很明顯不是。應該知道。 – Quad6

嘗試

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-24 03:00:30 Hushme

這將它放在行的開頭，在輸入字段之前。我想我可以做到這一點，使每一行的位置：絕對，然後使絕對（右：0 ..）但感覺錯了 – Quad6

使元件顯示內聯塊;

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-24 03:09:42 jDesign

將塊元素與表單元素內聯一個鏈接

回答

相關問題