प्रदर्शन परिभाषा अवधि और विवरण इनलाइन

Question

मैं पृष्ठ पर कुछ तत्व के लिए एक परिभाषा सूची का उपयोग कर रहा है और उन्हें इनलाइन प्रदर्शित करने के लिए, उदाहरण के लिए की जरूरत है: वे सामान्य रूप से की तरह देखो:

< डीईएफ़ अवधि >
        < डीईएफ़ desc >
        < डीईएफ़ desc >

और मैं उन्हें की तरह देखने की जरूरत है (ध्यान दें एकाधिक डीडी के):

< डीईएफ़ अवधि > < डीईएफ़ desc > < डीईएफ़ desc >
< डीईएफ़ अवधि > < डीईएफ़ desc > < def desc >
< डीफ़ टर्म > < डीईएफ़ desc > < डीईएफ़ desc >

मैं उन्हें moz में तैरता का उपयोग कर ठीक काम करते हैं लेकिन कोई फर्क नहीं पड़ता कि मैं क्या करने की कोशिश वे IE में काम नहीं करेगा, मैं आम तौर पर की तरह कुछ पाने के लिए प्राप्त कर सकते हैं:

< डीईएफ़ अवधि > < डीईएफ़ desc > < डीईएफ़ desc > < डीईएफ़ desc > < डीईएफ़ desc > < डीईएफ़ desc > < डीईएफ़ desc >
< डीईएफ़ अवधि >
< डीईएफ़ अवधि >

किसी को भी इस समस्या का समाधान मिल गया है, मैं वास्तव में अतिरिक्त मार्कअप जहां संभव जोड़ने से बचने के लिए चाहते हैं, लेकिन बदलते की कमी ताकि वे अपने विचार :(

धन्यवाद के बाहर एक बिना क्रम वाली सूची im अग्रिम

Answer 1

में करने के लिए आप की कोशिश की है डीटी में फ्लोट को साफ़ करना? इस तरह:

dt { clear: left; } 
dd { float: left; } 

---

संपादित करें: यहाँ एक क्रॉस-ब्राउज़र समाधान इस बात को मान्य है:

dd,dt{ display: inline; } 

<dl> 
<dt>1</dt><dd>1.1</dd><dd>1.2<br/></dd> 
<dt>2</dt><dd>2.1</dd><dd>2.2<br/></dd> 
</dl> 

लेकिन, जैसा कि आप देख सकते हैं, कि br बहुत बुरा और गैर अर्थ है। उम्मीद है कि कोई और बेहतर समाधान के साथ आ सकता है।:)

Answer 2

डिफ़ॉल्ट स्टाइलशीट

डीटी, dd {फ्लोट: छोड़ दिया;}
dd + डीटी {स्पष्ट: छोड़ा; }

यानी 6 & 7 स्टाइलशीट:

डीटी {फ्लोट: कोई नहीं;} dd { स्थिति: रिश्तेदार; शीर्ष: -19 पीएक्स;/अपने line-height/ }

IE6

http://code.google.com/p/ie7-js/

आशा है कि मदद करता है पर निर्भर करता है।

Answer 3

बस give them all layout, सबसे आसान तरीका सीएसएस संपत्ति का उपयोग करना है। आपकास्ट { ज़ूम: 1; }

Answer 4

यह काम करता है (वैसे केवल एफएफ 3.xx और ओपेरा 9.x पर परीक्षण किया, दोनों Ubuntu 8.04 पर):

सीएसएस:

p { 
    display: block; 
} 
dl { 
    display: block; 
    margin: 0; 
} 
dt { 
    display: block; 
    width: 7em; 
    border-right: 1px solid #ccc; 
    margin: 0; 
} 
dd { 
    display: none; 
    margin: 0; 
    position: relative; 
    /* 'position: absolute' would probably work better, 
     and lose the line break left by the 'position: relative;' */ 
    top: -1em; 
    left: 8em; 
} 
dt:hover + dd, dt:hover + dd + dd { 
    /* Couldn't find a way to target all sibling 
     dds of a dt without the + operator (and listing all of them), 
     but it works, albeit kludgy */ 
    display: inline; 
} 
dd:after { 
    content:"; "; 
} 
dd:last-child:after { 
    content:""; 
} 

एचटीएमएल:

<div id="content"> 
    <dl> 
     <dt>first dt</dt><dd>first dt's first dd</dd><dd>first dt's second</dd> 
     <dt>second dt</dt><dd>second dt's first dd</dd><dd>second dt's second</dd> 
     <dt>third dt</dt><dd>third dt's third dd</dd><dd>third dt's second</dd> 
    </dl> 
</div> 

एफएफ 3 और ओपेरा 9 .x:के तहत परीक्षण किए गए उदाहरण के लिए लिंक http://www.davidrhysthomas.co.uk/so/dls.html

Answer 5

नोट: आप सही तरीके से इस काम के काम के लिए डीडी तत्वों के बीच स्पेस न हो।

IE8 + के लिए हैक्स के लिए कोई ज़रूरत नहीं:

dd, 
dt{ 
    display: inline; 
    margin: 0; 
} 
dd:before { 
    content: ' '; /* space them */ 
} 
dt:before { /* insert line break before <dt> */ 
    content:"\A"; 
    white-space:pre; 
} 
dt:first-child:before { /* disable line break before the first <dt> */ 
    content: none; 
} 

आप IE8 समर्थन करने के लिए की जरूरत नहीं है, 4 CSS नियम छोड़ें और बस 3 एक के लिए इस चयनकर्ता का उपयोग: dt:not(:first-child):before

परिणाम (demo)

DT DD DD 
DT DD DD 

आप होना चाहते हैं असली शांत, आप कर सकते हैं प्रतिनिधि: कुछ इस तरह होना चाहिए इस के साथ 2 नियम कसकर: (demo)

DT: DD, DD 
DT: DD, DD 

मेरे लिए