सीएसएस फ्लोट सही ढंग से काम नहीं कर रहा है

Question

मेरा दाहिना फ्लोट काम नहीं कर रहा है कि मैं इसकी अपेक्षा कैसे करता हूं।

<div style="padding: 5px; border-bottom-width: 1px; border-bottom-color: gray; border-bottom-style: solid;"> 

    My Text 

<button type="button" class="edit_button" style="float: right; margin:5px;">My Button</button> 

</div> 

हालांकि यह हमेशा लाइन पर ले जाएं, लगता है:

मैं अपने बटन अच्छी तरह से एक रेखा से ऊपर अपने पाठ के अधिकार के लिए गठबंधन चाहते हैं।

यदि मैं डीआईवी के पैडिंग या मार्जिन को बढ़ाता हूं तो दाईं ओर वाला बटन अभी भी नीचे की रेखा पर धक्का दिया जाता है।

मैंने दाईं ओर बटन के पैडिंग और मार्जिन के साथ खेलने की कोशिश की है, लेकिन मुझे लगता है कि यह पाठ के बगल में अच्छी तरह से रखा जा सकता है।

फिडल यहाँ है:

http://jsfiddle.net/qvsy7/

बहुत धन्यवाद

Answer 1

आप div के अंदर अपने पाठ लपेट और नाव छोड़ दिया, जबकि आवरण div ऊंचाई होना चाहिए, और I'v भी ऊर्ध्वाधर संरेखण के लिए लाइन ऊंचाई जोड़ा की जरूरत

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;"> 
    <div style="float:left;line-height:30px;">Contact Details</div> 

    <button type="button" class="edit_button" style="float: right;">My Button</button> 

</div> 

यहां बेला जे एस =) http://jsfiddle.net/xQgSm/

Answer 2

इस

final answer

सीएसएस तरह

h2 { 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    margin: 0; 
    padding: 0; 
} 
.edit_button { 
    float: right; 
} 

---

demo1

सीएसएस

h2 { 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: gray; 
    float: left; 
    margin: 0; 
    padding: 0; 
} 
.edit_button { 
    float: right; 
} 

एचटीएमएल

<h2> 
Contact Details</h2> 
<button type="button" class="edit_button" >My Button</button> 

---

demo

एचटीएमएल

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray; float:left;"> 
Contact Details 



</div> 
<button type="button" class="edit_button" style="float: right;">My Button</button> 

Answer 3

आप अपने पाठ के लिए float:left आदेश उपयोग नहीं किया है।

Answer 4

यहां ऐसा करने का एक तरीका है।

आप HTML इस तरह दिखाई देता है:

div { 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: gray; 
    overflow: auto; 
} 
.edit_button { 
    float: right; 
    margin: 0 10px 10px 0; /* for demo only */ 
} 

चाल div है, जो एक नया ब्लॉक स्वरूपण संदर्भ शुरू होता है के लिए overflow: auto लागू करने के लिए है:

<div>Contact Details 
    <button type="button" class="edit_button">My Button</button> 
</div> 

निम्नलिखित सीएसएस लागू होते हैं। नतीजा यह है कि फ्लोट बटन div टैग द्वारा परिभाषित ब्लॉक क्षेत्र के भीतर संलग्न है।

फिर आप अपने स्टाइल को समायोजित करने के लिए आवश्यक बटन पर मार्जिन जोड़ सकते हैं।

मूल HTML और CSS में, फ़्लोट किया गया बटन सामग्री प्रवाह से बाहर था इसलिए div की सीमा को इन-फ्लो टेक्स्ट के संबंध में रखा जाएगा, जिसमें किसी भी फ़्लोट किए गए तत्व शामिल नहीं हैं।

डेमो में देखें: http://jsfiddle.net/audetwebdesign/AGavv/

Answer 5

Verry आराम से, तत्व के परिवर्तन आदेश:

उत्पत्ति

<div style=""> 

    My Text 

    <button type="button" style="float: right; margin:5px;"> 
     My Button 
    </button> 

</div> 

को बदलें:

<div style=""> 

    <button type="button" style="float: right; margin:5px;"> 
     My Button 
    </button> 

    My Text 

</div>