यह सीएसएस अब्रैप क्यों काम नहीं कर रहा है?

मैं bar_top_container div को अपनी सामग्री को लपेटने से रोकने की कोशिश कर रहा हूं इससे कोई फर्क नहीं पड़ता कि पृष्ठ कितना चौड़ा है (यानी दोनों चयन हमेशा एक ही पंक्ति पर दिखने चाहिए), यह काम नहीं कर रहा है, हालांकि पृष्ठ की चौड़ाई उनके लिए छोटी है दोनों एक पंक्ति पर फिट हैं, मैं इसे कैसे ठीक कर सकता हूं?यह सीएसएस अब्रैप क्यों काम नहीं कर रहा है?

शैलियाँ:

#bar_top_container { position: relative; white-space: nowrap; } 
#bar_top_block { float: left; padding-left: 10px; padding-right: 10px; border-right: 1px solid #4965BB; } 
#clear { clear: both; }

HTML:

<div id="bar_top_container"> 
<div id="bar_top_block"> 
    <span class="bold">select1: </span> 
    <select><option value="asdf">asdf</option></select> 
</div> 
<div id="bar_top_block"> 
    <span class="bold">asdf: </span> 
    <select><option value="blah">-- select action --</option></select> 
</div> 
<div id="clear"></div> 
</div>

स्रोत

2010-06-30 user318747

यदि आप इसे प्रदर्शित करते हैं तो block और inline गुणों के लिए गुण हो सकते हैं ... inline-block!

अपने कोड को सही है और काम कर रहा है:

span.bold हैं label रों
एक labelfor/id के माध्यम से अपने form तत्व को जुड़ा हुआ है विशेषताओं का
bar_top_block एक id दो बार उपयोग किया जाता है। एक class
float: left;display: inline-block; के रूप में की कोई जरूरत
इस प्रकार प्रयोग किया जाता है .bar_top_block तत्वों को भी इनलाइन प्रदर्शित किए जाते हैं एक समाशोधन तत्व या तो
की कोई जरूरत इसलिए किसी भी खाली स्थान के उन दोनों के बीच है होना चाहिए व्हाइटस्पेस के रूप में प्रदर्शित किया गया। इससे बचने के लिए, मैंने एक टिप्पणी जोड़ा जो एचटीएमएल कोड को पठनीय करने के बावजूद किसी भी सफेद जगह से बचें।पाठ के भीतर 'कोई खाली स्थान के' तो डेवलपर को पता चल जाएगा कि इस टिप्पणी को एक कारण के लिए नहीं है और छीन नहीं किया जाना चाहिए :)
आप body पर width निकाल सकते हैं है, यह उदाहरण के लिए सिर्फ यहाँ है
आप कंटेनर
IE7 के रूप में
और नीचे div तरह ब्लॉक तत्वों पर inline-block मूल्य समझ में नहीं आता पर overflow संपत्ति के साथ खेल सकते हैं, आप का उपयोग करना चाहिए display: inline और तत्व के साथ hasLayout, उदाहरण के लिए देते हैं, zoom: 1;
सबसे अच्छा तरीका है IE7 और नीचे और केवल उन ब्राउज़र को लक्ष्य करने के लिए एक सशर्त टिप्पणी के साथ है
मैं FX2 के लिए समर्थन जोड़ा लेकिन यह केवल ऐतिहासिक कारणों के लिए है :)

।

<form> 
    <label>select1: <select><option value="asdf">asdf</option></select></label> 
    <label>asdf: <select><option value="blah">-- select action --</option></select></label> 
</form>

आशा है कि यह मदद करता है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <title>Stack Overflow 3150509 - Felipe</title> 
    <style type="text/css"> 
body { 
    width: 300px; 
} 

#bar_top_container { 
    overflow: auto; 
    white-space: nowrap; 
    border: 1px solid red; 
} 

.bar_top_block { 
    display: -moz-inline-stack; /* Fx2, if you've to support this ooold browser. You should verify that you can still click in the elements, there is a known bug with Fx2 */ 
    display: inline-block; 
    padding-left: 10px; 
    padding-right: 10px; 
    border-right: 1px solid #4965BB; 
} 

    </style> 
    <!--[if lte IE 7]><style type="text/css"> 
.bar_top_block { 
    display: inline; 
    zoom: 1; 
} 
    </style> <![endif]--> 
</head> 
<body> 
    <form method="post" action="#" id="bar_top_container"> 
     <div class="bar_top_block"> 
      <label for="select1">Obviously I am a label: </label> 
      <select id="select1"><option value="asdf">asdf</option></select> 
     </div><!-- no whitespace 
     --><div class="bar_top_block"> 
      <label for="select2">I'm a label too and I need a for attribute: </label> 
      <select id="select2"><option value="blah">-- select action --</option></select> 
     </div> 
    </form> 
</body> 
</html>

स्रोत

2010-06-30 17:38:58 FelipeAls

तत्वों के बीच की जगहों को खत्म करने के लिए, आप अपने माता-पिता पर 'फ़ॉन्ट-आकार: 0;' का उपयोग कर सकते हैं। फिर आपको जहां भी आवश्यकता हो, बस टेक्स्ट के सही आकार को परिभाषित करें, उदाहरण के लिए: '.parent {display: inline-block; फ़ॉन्ट आकार: 0; }। मूल * {फ़ॉन्ट आकार: 12 पीएक्स} '। सौभाग्य। –

@SlavikMe मैं इस विधि का उपयोग नहीं करता क्योंकि, बेहतर पहुंच के लिए, मैं फ़ॉन्ट आकार के लिए 'em' इकाई के साथ काम करता हूं और' 0' सब कुछ तोड़ देगा। उदाहरण के लिए देखें [सी 14: फ़ॉन्ट आकारों के लिए एम इकाइयों का उपयोग] [http://www.w3.org/TR/WCAG20-TECHS/C14) डब्ल्यूसीएजी 2.0 तकनीक – FelipeAls

@ फ़ेलिपअल्स: धन्यवाद दोस्त! बहुत उपयोगी पोस्ट। यह वास्तव में मेरे लिए दिन बचाया। – YashG99

फ्लोटिंग तत्वों white-space: nowrap के रूप में लपेट ब्लॉक तत्वों के लिए, लेकिन केवल इनलाइन तत्वों और पाठ के लिए काम नहीं करता।

स्रोत

2010-06-30 15:03:43 jantimon

इसके आसपास कोई रास्ता है? – user318747

एचटीएमएल 5 के लिए प्रतीक्षा करें;) - एचटीएमएल 4 सीएसएस काम-आसपास के बहुत सारे हैं। फ्लोट लेआउट के लिए खोजें। – jantimon

https://bugzilla.mozilla.org/show_bug.cgi?id=488725 – gavenkoa

-1

मैं एक वैध प्रपत्र उपयोग का उपयोग करने का सुझाव दे रहा हूँ।

स्रोत

2012-12-20 15:53:11

यह सीएसएस अब्रैप क्यों काम नहीं कर रहा है?

उत्तर

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