在文本框中放置一個按鈕

我試圖設計一個窗體，並在文本框內使用按鈕。我希望該按鈕位於文本框內。這是我嘗試：在文本框中放置一個按鈕

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="form-group required"> 
      <label for="PickList_Options" class="col-sm-4 control-label">Options</label> 
      <div class="col-sm-4 buttonwrapper"> 
       <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' /> 
       <button>GO</button> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="result" id="mydiv"></div> 
    </div> 
</div>

我的CSS：

.buttonwrapper { 
    display:inline-block; 
} 

input, 
button { 
    background-color:transparent; 
    border:0; 
}

但是，問題是，Go按鈕被置於下方的文本框中。我該怎麼做把它放在文本框裏面？

我希望「Go」按鈕位於文本框內。

來源

2016-11-09 SSS

絕對定位可能是這裏最好的選擇。（也就是說，如果你真的想將按鈕放置在輸入字段上，在這種情況下，你將不得不採取額外的措施來防止它隱藏下面的文本。實際的_best_選項可能只是簡單地接下來有兩個元素並將圓角邊框放在這兩個邊上。） – CBroe

[我如何在iPhone的HTML文本輸入框中添加一個清晰的按鈕，如iPhone？]（http://stackoverflow.com/questions/2803532 /怎麼辦 - 我 - 把 - 一個清晰的按鈕，裏面-MY-HTML的文本輸入框樣的-iphone-一樣） –

.buttonwrapper { 
 
    display: inline-block; 
 
} 
 

 
input{ 
 
    background-color: transparent; 
 
    border: 2px solid black; 
 
} 
 

 
button { 
 
    margin-left: -50%; 
 
    border: none; 
 
    background-color: transparent; 
 
}

<div class="row"> 
 
    <div class="col-sm-6"> 
 
    <div class="form-group required"> 
 
     <label for="PickList_Options" class="col-sm-4 control-label">Options</label> 
 

 
     <div class="col-sm-4 buttonwrapper"> 
 
     <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' /> 
 
     <button>GO</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
    <div class="result" id="mydiv"></div> 
 
    </div> 
 
</div>

來源

2016-11-09 09:12:38 Federico

您需要將position: absolute;添加到按鈕&，並使用top對其進行定位。這些樣式添加到您的按鈕

button { 
    position: absolute; 
    top: 6px; 
}

Codepen

.buttonwrapper { 
 
    display:inline-block; 
 
} 
 

 
input, 
 
button { 
 
    background-color:transparent; 
 
    border:0; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    top: 6px; 
 
}

<div class="row"> 
 
    <div class="col-sm-6"> 
 
    <div class="form-group required"> 
 
     <label for="PickList_Options" class="col-sm-4 control-label">Options</label> 
 

 
     <div class="col-sm-4 buttonwrapper"> 
 
     <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' /> 
 
     <button>GO</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
    <div class="result" id="mydiv"></div> 
 
    </div> 
 
</div>

來源

2016-11-09 09:07:47

可以使用的位置是：絕對的功能在這裏，

HTML

<div class="row"> 
          <div class="col-sm-6"> 
           <div class="form-group required"> 
            <label for="PickList_Options" class="col-sm-4 control-label">Options</label> 

            <div class="col-sm-4 buttonwrapper"> 
            <div class="button-container"> 
             <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' /> 
             <button>GO</button> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="col-sm-6"> 
           <div class="result" id="mydiv"></div> 
          </div> 
         </div>

CSS

.button-container button { line-height: 28px; position: absolute; right: 0; top: 0;} 
.button-container {position:relative;} 
.button-container input {padding-right:40px;}

來源

2016-11-09 09:15:55

請試試這個。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
     .input-container{ 
 
      width: 250px; 
 
      border: 1px solid #a9a9a9; 
 
      float: left; 
 
     } 
 
     .input-container input:focus, .input-container input:active { 
 
      outline: none; 
 
     } 
 
     .input-container input { 
 
      width: 80%; 
 
      float: left; 
 
      border: none; 
 
     } 
 

 
     .input-container button { 
 
      float: right; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="input-container"> 
 
     <input type="text" class="input-field"/> 
 
     <button class="input-button">Ok</button> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-11-09 09:18:38 Nitheesh

你需要做的就是把兩個輸入字段和一個容器中的按鈕是什麼，你設置容器中相對定位並設置按鈕被絕對定位。容器相對定位非常重要，以確保按鈕保持在輸入區域內。

像這樣：

.buttonwrapper { 
    display:inline-block; 
    position: relative; 
} 

input, 
button { 
    background-color:transparent; 
    border:0; 
} 

button { 
    position: absolute; 
    /* Adjust these two to your liking */ 
    top: 6px; 
    right: 3px; 
} 

<div class="row"> 
    <div class="col-sm-6"> 
    <div class="form-group required"> 
     <label for="PickList_Options" class="col-sm-4 control-label">Options</label> 

     <div class="col-sm-4"> 
      <div class="buttonwrapper"> 
      <input type="text" class="form-control" id="PickList_Options" name="PickList_Options" value='' /> 
      <button>GO</button> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6"> 
    <div class="result" id="mydiv"></div> 
    </div> 
</div>

來源

2016-11-09 09:18:51

的簡單目的使用此方法，兩個文本框和按鈕。對於如

設置固定寬度：文本的寬度爲200px，按鈕會40px並添加margin-left:-40px（根據您的需要），所以這將是固定輸入文本框的160-200px之間..

.buttonwrapper { 
 
      display:inline-block; 
 
     } 
 

 
     input, 
 
     button { 
 
      background-color:transparent; 
 
      border:1 solid black; 
 
     }

<div class="row"> 
 
     <div class="col-sm-6"> 
 
      <div class="form-group required"> 
 
       <label for="PickList_Options" class="col-sm-4 control-label">Options</label> 
 

 
     
 

 
<div class="col-sm-4 buttonwrapper"> 
 
      <input type="text" style="width:200px" class="form-control" id="PickList_Options" name="PickList_Options" value='' /> 
 
      <button style="width:40px;margin-left: -43px">GO</button> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="col-sm-6"> 
 
    <div class="result" id="mydiv"></div> 
 
</div> 
 
</div>

來源

2016-11-09 09:31:44

以上所有答案都是正確的。但是，有一個非常簡單的方法來實現它。如下所示：

<div class="col-sm-6"> 
           <div class="form-group required"> 
            <label for="PickList_Options" class="col-sm-4 control-label">Options</label> 
            <div class="col-sm-6"> 
             <div class="input-group"> 
              <input type="text" class="form-control"> 
              <span class="input-group-btn"> 
              <button class="btn btn-default" type="button">Add</button> 
              </span> 
             </div> 
            </div>         
           </div> 
          </div>

這是訣竅。無需編寫額外的CSS屬性。謝謝大家的答案。

來源

2016-11-09 09:35:12 SSS

Twitter Bootstrap很容易做到這一點。他們稱之爲Input Group。如果您希望在不使用整個引導程序的情況下執行相同操作，請嘗試this fiddle。

這裏的標記

<span> 
    <input type="text" value="Some text"> 
    <button onclick="alert('Hello!');">Click</button> 
</span>

和相關的CSS

span { 
    border: 1px solid red; 
    padding: 2px; 
    font-size: 0px; 
    display: inline-block; 
    background: white; 
} 

input, 
button { 
    display: inline-block; 
    margin: 0px; 
    font-size: 12px; 
    background: white; 
    border-style: none; 
}

來源

2016-11-09 09:37:18

在文本框中放置一個按鈕

回答

相關問題