शैली एक definitition सूची के रूप में सरल कुंजी मान सेट

Question

मैं के रूप में सरल एक परिभाषा सूची का उपयोग करना चाहते हैं:

<dl> 
    <dt>name:</dt> 
    <dd>Tomas</dd> 

    <dt>address:</dt> 
    <dd>this is a very long wrapping address</dd> 

    <dt>age:<dt> 
    <dd>29</dd> 
<dl> 

की तरह कुछ रेंडर करने के लिए:

name: Tomas 
address: this is a very long 
wrapping address 
age: 29 

परिभाषा सूची शब्दार्थ लगता है यहां सबसे अच्छा विकल्प।

नए रन-इन प्रदर्शन शैली का प्रयोग चाल करना होगा:

<style> dt { display: run-in; } </style> 

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

संपादित करें:

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

क्योंकि यह प्रस्तुत करना होगा काम नहीं करेगा के रूप में:

name: Tomas 
address: this is a very long 
     wrapping address 
age: 29 

डिजाइन निर्दिष्ट करता है कि इन बहु लाइन क्षेत्र को बचाने के लिये लाइन के शुरू होने से लपेट चाहिए अंतरिक्ष।

Answer 1

मुझे लगता है कि यह काम करेगा:

dt { 
    float: left; 
    clear: left; 
    margin: 0; 
    padding: 0 .5em 0 0; 
} 
dd { 
    margin: 0; 
    padding: 0; 
} 

एक अन्य विकल्प है कि उपयोगी है :after छद्म वर्ग है। आप dt तत्वों में से प्रत्येक पर पेट के छोड़ सकता है और है:

dt:after { 
    content: ":"; 
} 

यह इसे और अधिक लचीला बनाता है और आप एक पूरे के रूप में सूची और वेबसाइट भर में उस चरित्र को बदलने, या यह से छुटकारा पाने के लिए यदि आप की तरह महसूस कर सकते हैं यह।

आपके द्वारा उल्लिखित रैपिंग समस्या को हल करने के लिए, आपको dt और dd तत्वों दोनों पर चौड़ाई निर्धारित करने की आवश्यकता होगी। या, "डेटा" के लिए नाम/पता आदि के लिए th और td के साथ तालिका का उपयोग करें। आईएमओ एक टेबल यहां एक अर्थात् स्वीकार्य समाधान है - यह टैब्यूलर डेटा है।

Answer 2

आप पिछले तत्व के बाईं ओर डीडी को बस फ्लोट कर सकते हैं।

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

आप अतिरिक्त संरेखण के लिए या तो चौड़ाई विशेषता भी जोड़ सकते हैं।

dt { clear: left; width: 20%; } 
dd { float: left; } 

Answer 3

ठीक है, तो आप बस डीटी नाव दे सकता है: छोड़ दिया

dt { float: left; } 

वरना जाने डीटी प्रदर्शन इनलाइन:

dt { display: inline; } 

Answer 4

मुझे लगता है कि (छोटे चौड़ाई के लिए परीक्षण करने के लिए टिप्पणी हटाएं पहली पंक्ति) इस:

dl, dd, dt { margin: 0; } 
/*dl { width: 80px; }*/ 
dl dt, dl dd { display: inline; } 
dl dd:after { content: ' '; padding-left: 100%; } 

Answer 5

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

dt {float:left;clear:left;margin-right:5px;} 
dd {margin:0;}