सीएसएस को चार्ज करने के लिए कुंजी/मूल्य क्षैतिज किंवदंती।

मैं एचटीएमएल/सीएसएस में क्षैतिज किंवदंती बना रहा हूं। मैं उसके बगल में कुछ पाठ है, तो कुछ जगह है, तो कुछ पाठ, एक अंतरिक्ष के साथ एक और रंग बॉक्स, आदिसीएसएस को चार्ज करने के लिए कुंजी/मूल्य क्षैतिज किंवदंती।

[blue] - LabelA [green] - LabelB [red] - LabelC

मैं कैसे इस पार ब्राउज़र करने के लिए समझ नहीं के साथ एक रंगीन बॉक्स है। मैंने फ़्लोटिंग divs/spans के सभी संयोजनों की कोशिश की है, जिनके बारे में मैं सोच सकता हूं, लेकिन या तो लेबल रंगीन बॉक्स के नीचे जा रहा है या मैं पौराणिक कथाओं में प्रत्येक कुंजी को अलग करने के लिए काम करने के लिए पैडिंग नहीं कर सकता।

आप यह कैसे करेंगे?

स्रोत

2011-10-24 Davis Dimitriov

यह वास्तव में आप अपने निकटतम काम कर उदाहरण पोस्ट यदि ऐसा है तो किसी को यह जानने कैसे ठीक करने के लिए करने में सहायता कर सकते हैं में मदद मिलेगी यह। – Whetstone

@ वाथस्टोन मैं वास्तव में यह देखने में अधिक दिलचस्पी लेता हूं कि कोई व्यक्ति इस समाधान को हल करने के लिए सबसे अच्छा तरीका कैसे हल करता है जब तक कि यह –

आपको इस तरह की चीज़ों के लिए फ्लोट की आवश्यकता नहीं है। वास्तव में आपके पास जोड़े की एक सूची है। वहाँ एक टैग के लिए सेट एक definition list कहा जाता है:

<dl> 
    <dt>[blue]</dt> 
    <dd> - LabelA </dd> 

    <dt>[green]</dt> 
    <dd> - LabelB </dd> 

    <dt>[red]</dt> 
    <dd> - LabelC </dd> 
</dl>

ये ~~inline~~ block डिफ़ॉल्ट रूप से कर रहे हैं। वहां से आप तत्वों के जोड़े को स्टाइल कर सकते हैं:

<style> 
    dl 
    { 
     width: 200px; 
     background: #fff; 
     border: 1px solid #000; 
     padding: 5px 15px; 
     } 

     dt, dd 
     { 
     display: inline; 
     }  
</style>

स्रोत

2011-10-24 15:35:44

काम नहीं करता है, वे वास्तव में नहीं हैं। वे 'ब्लॉक' हैं।मैं मानता हूं कि इसे चिह्नित करने का यह सही तरीका है। आपको केवल यह समझने की आवश्यकता है कि या तो 'डिस्प्ले: इनलाइन' या 'फ्लोट: बाएं' आवश्यक होगा। –

@RyanKinal - आप सही हैं। अपडेट किया गया। –

फ़्लोटिंग divs का उपयोग करने की कोई आवश्यकता नहीं है। इस

DIV.LegendItem 
{ 
    display:inline-block; 
    margin-right:20px; 
}

(चौड़ाई और ऊंचाई जोड़ने DIV कोई सामग्री नहीं है)

क्षमा करें यदि आपके टेक्स्ट बॉक्स में नहीं है भी इस ऐड ...

SPAN.LegendText 
{ 
    display:inline-block; 
    margin-right:20px; 
}

उदाहरण here

प्रयास करें

स्रोत

2011-10-24 15:34:55 musefan

एक छोटी तालिका का उपयोग करने और पृष्ठभूमि रंगों का उपयोग करने का प्रयास करें। इस jsfiddle बाहर

<table> 
    <tr> 
    <td style="backgroundcolor:red; width:5px">&nbsp;</td> 
    <td>- Red</td> 
    </tr> 
</table>

स्रोत

2011-10-24 15:36:18

लेआउट के लिए टेबल्स का कभी भी उपयोग नहीं किया जाना चाहिए। –

मैं आपका डेटा टैब्यूलर डेटा है, तो यह सबसे अच्छा तरीका है। यदि नहीं, तो आपको इससे बचना चाहिए, क्योंकि यह अर्थपूर्ण नहीं है। –

टेबल्स का उपयोग "लेआउट" के लिए नहीं किया जाना चाहिए, लेकिन वह लेआउट के बारे में बात नहीं कर रहा था, बस डेटा प्रदर्शित कर रहा था। मतदान से पहले प्रश्न पढ़ें। –

जांच करें और देखें कि यह है आप के लिए http://jsfiddle.net/CQXk5/

स्रोत

2011-10-24 15:36:20

क्या देख रहे यहाँ एक सरल उदाहरण है: http://jsfiddle.net/MTB2q/

enter image description here

स्रोत

2011-10-24 15:38:59 wsanville

महान उदाहरण, बहुत बहुत धन्यवाद –

यह वाकई अच्छा उदाहरण है! – Worker

यह काम करना चाहिए ...

फ़्लोट्स से बचें क्योंकि आपने विशेष रूप से क्रॉस ब्राउज़र का उल्लेख किया है, इसलिए मुझे लगता है कि आप लीज़ पर हैं आई 7 का समर्थन नहीं। आईई 7 लपेटें एक गंदे तरीके से तैरती हैं, यही कारण है कि मैंने इनलाइन divs का सुझाव दिया।

DOCTYPE HTML

<!doctype html> 
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> 
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline --> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

एचटीएमएल

<div class="Legend"> 
    <div class="Blue">&nbsp;</div> 
    Blue 
    <div class="Green">&nbsp;</div> 
    Green 
    <div class="Red">&nbsp;</div> 
    Red 
</div>

सीएसएस

.Legend div{ 
    margin-left:15px; 
    width:16px; 
    border:1px solid #808080; 
    display:inline-block; 
} 
.ie7 .Legend div{ 
    display:inline; 
    zoom:1; 
} 
.Red {background-color:red;} 
.Green {background-color:green;} 
.Blue {background-color:blue;}

स्रोत

2011-10-24 15:50:08 Andrew

सीएसएस को चार्ज करने के लिए कुंजी/मूल्य क्षैतिज किंवदंती।

उत्तर

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