टेक्स्ट बॉक्स

के अंदर एक बटन डालें, मैं टेक्स्ट बॉक्स के अंदर एक बटन के साथ एक फॉर्म डिज़ाइन करने की कोशिश कर रहा हूं। मैं चाहता हूं कि वह बटन टेक्स्ट-बॉक्स के अंदर हो। लेकिन, समस्या है, जाएँ बटन पाठ बॉक्स के नीचे रख दिया गया हैटेक्स्ट बॉक्स

.buttonwrapper { 
    display:inline-block; 
} 

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

: यह मैं कैसे की कोशिश की है:

<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 SSS

पूर्ण स्थिति शायद यहाँ सबसे अच्छा विकल्प है। (यानी, यदि आप वास्तव में इनपुट क्षेत्र _over_ बटन रखना चाहते हैं, तो इस मामले में आपको इसे इसके अंतर्गत अस्पष्ट पाठ से रखने के लिए अतिरिक्त उपाय लागू करना होगा। वास्तविक _best_ विकल्प के बजाय बस दो तत्व होंगे एक-दूसरे के लिए, और उन दोनों के चारों ओर गोलाकार सीमा डालें।) – CBroe

संभावित डुप्लिकेट [आईफोन जैसे मेरे एचटीएमएल टेक्स्ट इनपुट बॉक्स के अंदर मैं एक स्पष्ट बटन कैसे डालूं?] (http://stackoverflow.com/questions/2803532/कैसे करते हैं-ए-डाल-एक स्पष्ट बटन-अंदर-मेरी-एचटीएमएल-पाठ इनपुट बॉक्स की तरह-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

आपको बटन & पर 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

आप स्थिति का उपयोग कर सकते हैं: यहाँ पूर्ण सुविधा,

एचटीएमएल

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

सीएसएस

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

यह चाल है। अतिरिक्त सीएसएस गुण लिखने की जरूरत नहीं है। आपके जवाबों के लिए आप सभी का धन्यवाद।

स्रोत

2016-11-09 09:35:12 SSS

ट्विटर बूटस्ट्रैप कुछ इस तरह से आसानी से करता है। वे इसे Input Group कहते हैं। यदि आप पूरे बूटस्ट्रैपनेस के बिना ऐसा करने की सोच रहे हैं, तो this fiddle आज़माएं।

यहाँ मार्कअप

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

और संबद्ध सीएसएस

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

टेक्स्ट बॉक्स

उत्तर

संबंधित मुद्दे