HTML

Question

को बदलने के बिना एक ही पंक्ति पर दो तत्वों को संरेखित कैसे करें मेरे पास एक ही पंक्ति पर दो तत्व हैं जो बाएं और फ़्लोट किए गए दाएं हैं।

<style type="text/css"> 
#element1 {float:left;} 
#element2 {float:right;} 
</style> 

<div id="element1"> 
element 1 markup 
</div> 
<div id="element2"> 
element 2 markup 
</div> 

मुझे तत्व 1 के लिए लाइन 1 के लिए लाइनिंग के लिए आवश्यक है जिसमें दोनों के बीच पैडिंग के लगभग 10 पिक्सल हैं। समस्या यह है कि तत्व 2 की चौड़ाई सामग्री और ब्राउज़र (फ़ॉन्ट आकार, इत्यादि) के आधार पर बदल सकती है, इसलिए यह हमेशा तत्व 1 के साथ पूरी तरह से पंक्तिबद्ध नहीं होती है (मैं केवल मार्जिन-दाएं लागू नहीं कर सकता हूं और इसे स्थानांतरित नहीं कर सकता)।

मैं मार्कअप भी नहीं बदल सकता।

क्या उन्हें लाइन करने के लिए एक समान तरीका है? मैंने प्रतिशत के साथ मार्जिन-दाएं करने की कोशिश की, मैंने तत्व 1 को करीब लाने के लिए तत्व 1 पर नकारात्मक मार्जिन की कोशिश की (लेकिन इसे काम नहीं कर सका)।

Answer 1

display:inline-block

#element1 {display:inline-block;margin-right:10px;} 
#element2 {display:inline-block;} 

Example

Answer 2

#element1 {float:left;margin-right:10px;} 
#element2 {float:left;} 

नीचे के रूप में अपने सीएसएस बदलें यहाँ JSFiddle http://jsfiddle.net/a4aME/

Answer 3

#element1 {float:left;} 
#element2 {padding-left : 20px; float:left;} 

बेला है: http://jsfiddle.net/sKqZJ/

या

#element1 {float:left;} 
#element2 {margin-left : 20px;float:left;} 

बेला: http://jsfiddle.net/sKqZJ/1/

या

#element1 {padding-right : 20px; float:left;} 
#element2 {float:left;} 

बेला: http://jsfiddle.net/sKqZJ/2/

या

#element1 {margin-right : 20px; float:left;} 
#element2 {float:left;} 

बेला: http://jsfiddle.net/sKqZJ/3/

संदर्भ: The Difference Between CSS Margins and Padding

Answer 4

का उपयोग करते हुए ऐसे मामलों में जहां मैं उस तरह जारी तत्वों का उपयोग में, मैं आम तौर पर लगता है कि कंटेनर तत्व हमेशा दोनों की चौड़ाई के लिए काफी बड़ा हो जाएगा करने की आवश्यकता है फ्लोट किए गए तत्वों के साथ वांछित मार्जिन इसके अंदर फिट बैठे हैं।

#container {width: 960px;} 
#element1 {float:left; width:745px; margin-right:15px;} 
#element2 {float:right; width:200px;} 

आपको लगता है कि क्योंकि यह एक स्केलिंग चौड़ाई लेआउट है, एक और नहीं कर सकते हैं: ऐसा करने के लिए सबसे आसान तरीका है जाहिर है, दोनों के तत्वों तय चौड़ाई है कि सही ढंग से इस तरह बाहरी तत्व के अंदर फिट होगा दे रहा है जहां कुछ इस तरह की जरूरत है

#element1 {float:left; width:70%; margin-right:10%} 
#element2 {float:right; width:20%;} 

यह मुश्किल हो जाता है: विकल्प आयामों के प्रत्येक सेट प्रतिशत हो की तरह है

#element1 {float:left; width:70%; margin-right:10%} 
#element2 {float:right; width:200px;} 

ऐसे ही मामलों में, मैं वें लगता है , हालांकि यह एक जारी समाधान नहीं है

#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */ 
#element1 {margin-right:215px;} 
#element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;} 

यह पक्ष में पक्ष कॉलम जहां से परिणाम है: कभी कभी में सबसे अच्छा विकल्प तैरता का उपयोग नहीं करने के लिए, और रिश्तेदार/पूर्ण स्थिति का उपयोग इस तरह एक ही प्रभाव प्राप्त करने के लिए है वे एक ही ऊंचाई हैं, और एक तरल पदार्थ बना सकता है जबकि दूसरे की स्थिर चौड़ाई है।

Answer 5

प्रदर्शन का उपयोग करके: इनलाइन-ब्लॉक; और अधिक आम तौर पर जब आपके माता-पिता होते हैं (हमेशा HTML के अलावा एक अभिभावक होता है) आंतरिक तत्वों के लिए display: inline-block; का उपयोग करें। और उन्हें एक ही पंक्ति में रहने के लिए मजबूर करने के लिए जब भी खिड़की कम हो जाती है (अनुबंधित)। माता-पिता के लिए जोड़े दो संपत्ति:

white-space: nowrap; 
    overflow-x: auto; 

यहाँ

एक और अधिक स्वरूपित उदाहरण यह स्पष्ट करने के लिए:

.parent { 
    white-space: nowrap; 
    overflow-x: auto; 
} 

.children { 
    display: inline-block; 
    margin-left: 20px; 
} 

इस उदाहरण के लिए विशेष रूप से, आप साथी के रूप में ऊपर लागू कर सकते हैं (मैं मान रहा हूँ माता-पिता शरीर है। यदि आप सही माता-पिता नहीं डालते हैं), तो आप एचटीएमएल को बदलना भी पसंद कर सकते हैं और यदि संभव हो तो उनके लिए माता-पिता को जोड़ सकते हैं।

body { /*body may pose problem depend on you context, there is no better then have a specific parent*/ 
     white-space: nowrap; 
     overflow-x: auto; 
} 

#element1, #element2{ /*you can like put each one separately, if the margin for the first element is not wanted*/ 
    display: inline-block; 
    margin-left: 10px; 
} 

को ध्यान में रखना white-space: nowrap; और overlow-x: auto; क्या आप उन्हें एक पंक्ति में होना करने के लिए मजबूर करने की जरूरत है। सफेद अंतरिक्ष: अब्रैप; रैपिंग अक्षम करें। और ओवरलो-एक्स: ऑटो; स्क्रॉलिंग को सक्रिय करने के लिए, जब तत्व फ्रेम सीमा से अधिक हो जाता है।