Dt और dd को कैसे स्टाइल करें ताकि वे एक ही पंक्ति में हों?

Question

CSS का उपयोग करते हुए, मैं निम्नलिखित शैली कैसे कर सकता हूं:

<dl>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

इसलिए की सामग्री के dtएक स्तंभ में शो और की सामग्री को ddएक और स्तंभ में, प्रत्येक के साथ dtऔर इसी ddएक ही लाइन पर? यानी कुछ ऐसा दिखना

Comments

बस एक उपयोगी नोट के रूप में: यदि आप डॉट्स और dds की लाइनों के बीच रिक्ति को नियंत्रित करना चाहते हैं, तो इसे देखें: stackoverflow.com/q/896815/114029 ये शक्तिशाली टैग स्टाइलिंग फ़ॉर्म को वास्तव में आसान और सुंदर बनाते हैं।

— लेनियल मैकाफेर्री

इसके अलावा stackoverflow.com/questions/896815/… विशेष रूप से स्वीकृत उत्तर stackoverflow.com/a/896840/1037948

— drzaus

कृपया इसके लिए स्वीकृत उत्तर को बदलने पर विचार करें: stackoverflow.com/a/44599527/3853934

— Michał Perłakowski

Answer 1

dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0
  padding: 0;
  margin: 0
}

<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

Comments

धन्यवाद! इस सीएसएस टिप ने मुझे कोड फॉर्म डेकोरेटर क्लासेस के बिना अपने Zend फॉर्म को फॉर्मेट करने में मदद की।

— devNoise

आप इस विधि का उपयोग करके "पंक्तियों" के बाहर एक निचला मार्जिन या पैडिंग टो स्थान जोड़ने में सक्षम नहीं लगते हैं।

— ग्राक

मैं clear: leftडीटी शैली को जोड़ने की सलाह देता हूं ताकि यह सुनिश्चित किया जा सके कि उन्हें लपेटने की आवश्यकता है।

— शमौन

* { ... }बयान सब कुछ मार्जिन और गद्दी खो बनाता है, और इसे हटाने डीएल विकृत। कक्षा का उपयोग करने से चाल भी नहीं चलेगी। ऐसा लगता है कि अगर मुझे कुछ भी चाहिए लेकिन डीएल मुझे हर जगह हाशिये और पैडिंग के बिना जाना होगा ... या?

— Erk

यह अजीब तरह से व्यवहार करता है जब आप <dd> में पहला शब्द चुनते हैं (डबल क्लिक)। यह <dt> के अंदर पाठ का चयन भी करता है, जब तक कि <dt> और <dd> के बीच व्हाट्सएप (या यदि आप htmlmin का उपयोग कर रहे हैं)।

— केफंक

Answer 2

मुझे फ्लोट्स का उपयोग किए बिना एक समाधान मिला है!
कोडपेन पर यह जाँच करें

अर्थात।

dl.inline dd {
  display: inline;
  margin: 0;
}
dl.inline dd:after{
  display: block;
  content: '';
}
dl.inline dt{
  display: inline-block;
  min-width: 100px;
}

Update - 3 ^rd Jan 2017: मैंने समस्या के लिए फ्लेक्स-बॉक्स आधारित समाधान जोड़ा है। जाँच करें कि लिंक किए गए कोडपेन में और जरूरत के अनुसार इसे परिष्कृत करें। धन्यवाद!

dl.inline-flex {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 300px;      /* set the container width*/
  overflow: visible;
}
dl.inline-flex dt {
  flex: 0 0 50%;
  text-overflow: ellipsis;
  overflow: hidden;
}
dl.inline-flex dd {
  flex:0 0 50%;
  margin-left: auto;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

Comments

उत्तम! उस दुष्ट नाव ने केवल एक समस्या हल की, जबकि मुझे दो नए दिए (जैसे कोई ऊर्ध्वाधर संरेखित नहीं)। अच्छा लगा कि यह अब चला गया है।

— फ्लू

यह डीडी भाग में लघु पाठ के साथ अच्छी तरह से काम करता है; यदि पाठ बहुत लंबा है, तो यह डीटी भाग के चारों ओर लपेटेगा और दिखाएगा।

— रिकार्डो मुरी

यह काम करता है भले ही सूची के कुछ आइटम खाली हों। महान!

— टॉमस क्यूब्स

@ tjm1706: मुझे लगता है, फ्लेक्स आधारित समाधान लंबे पाठ मामले को संभाल सकता है। धन्यवाद :)

— नवनीत

@navaneeth ग्रेट सोलन। मेरे द्वारा जोड़े गए शब्द और परिभाषा के बीच डॉट्स प्राप्त करने के लिए: dl.inline-flex dt: after {content: "................"} मैं वास्तव में 150 डॉट्स का उपयोग यहां सुनिश्चित करने के लिए करता हूं। काफी हैं आपको श्वेत-स्थान जोड़ने की भी आवश्यकता है:

— drap को nowrap

Answer 3

सीएसएस ग्रिड लेआउट

तालिकाओं की तरह, ग्रिड लेआउट एक लेखक को कॉलम और पंक्तियों में तत्वों को संरेखित करने में सक्षम बनाता है।
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

कॉलम आकार बदलने के लिए, grid-template-columnsसंपत्ति पर एक नज़र डालें ।

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

Comments

यह वही है जो मैं चाहता हूं। caniuse.com/#feat=css-grid - मैं जितना चाहे उतना सार्वभौमिक नहीं हूँ, लेकिन सहिष्णु रूप से अच्छी तरह से समर्थित है।

— इरिडन

Answer 4

यदि आप बूटस्ट्रैप 3 (या इससे पहले) का उपयोग करते हैं ...

<dl class="dl-horizontal">
    <dt>Label:</dt>
    <dd>
      Description of planet
    </dd>
    <dt>Label2:</dt>
    <dd>
      Description of planet
    </dd>
</dl>

Comments

यदि आप बूटस्ट्रैप के सीएसएस को देखते हैं, तो आप यह समझ सकते हैं कि बूटस्ट्रैप का उपयोग किए बिना भी इसे कैसे स्टाइल किया जा सकता है, हालांकि, मैं उस ढांचे को प्यार करता हूं। यहाँ एक स्निपेट है, उदाहरण की सादगी के लिए उत्तरदायी डिजाइन के लिए मीडिया के प्रश्नों को अनदेखा करना: dl {मार्जिन-टॉप: 0; मार्जिन-बॉटम: 20px} dt, dd {पंक्ति-ऊँचाई: 1.428571429} dt / font-weight: 700} dd {मार्जिन-लेफ्ट: 0} .dl- हॉरिजॉन्टल dt {फ्लोट: लेफ्ट; चौड़ाई: १६० पीएक्स; क्लियर: लेफ्ट; टेक्स्ट-अलाइन: राइट; ओवरफ्लो: हिडन; टेक्स्ट-ओवरफ्लो: इलिप्सिस; वाइट-स्पेस: अब्रैप} .dl-। क्षैतिज dd {मार्जिन-लेफ्ट: 180px}

— टिम फ्रैंकलिन

dl-horizontalवास्तव में बूटस्ट्रैप 4. BS4 से हटा दिया गया, आप के बजाय ग्रिड वर्गों का उपयोग करने की जरूरत है।

— स्क्रिप्बलमैकर

Answer 5

मान लें कि आप मार्जिन की चौड़ाई जानते हैं:

dt { float: left; width: 100px; }
dd { margin-left: 100px; }

Comments

मैं इसे साफ नहीं कहूंगा, क्योंकि आपने हाशिये पर हाशिये पर डाल दिया है।

— लियाम डॉसन

स्वच्छ: एक सरल, अच्छी तरह से परिभाषित, और मनभावन आकार। जवाब छोटा है। यह समस्या को तीन कथनों में हल करता है। मार्जिन ज्ञात न होना प्रश्न के भाग के रूप में एक आवश्यकता नहीं थी।

— पैतृक

इन प्रश्नों की शैलियों में मार्कअप के लिए आमतौर पर स्वच्छ का उपयोग किया जाता है। वैसे भी, StackOverflow में आपका स्वागत है, और मेरा सुझाव है कि आप अपने प्रश्न के शरीर में उन प्रकार की मान्यताओं को रखें, सिर्फ स्पष्टता के लिए।

— लियाम डॉसन

Answer 6

क्योंकि मुझे अभी तक एक उदाहरण देखना है जो मेरे उपयोग के मामले के लिए काम करता है, यहां सबसे पूर्ण-प्रमाण समाधान है जिसे मैं महसूस कर पा रहा था।

dd {
    margin: 0;
}
dd::after {
    content: '\A';
    white-space: pre-line;
}
dd:last-of-type::after {
    content: '';
}
dd, dt {
    display: inline;
}
dd, dt, .address {
    vertical-align: middle;
}
dt {
    font-weight: bolder;
}
dt::after {
    content: ': ';
}
.address {
    display: inline-block;
    white-space: pre;
}

Surrounding

<dl>
  <dt>Phone Number</dt>
  <dd>[phone]</dd>
  <dt>Email Address</dt>
  <dd><a href="#">[e-mail]</a></dd>
  <dt>Postal Address</dt>
  <dd><div class="address">123 FAKE ST<br />EXAMPLE EX  00000</div></dd>
</dl>

Text

अजीब तरह से, यह साथ काम नहीं करता है display: inline-block। मुझे लगता है कि यदि आपको किसी भी dtतत्व या ddतत्वों के आकार को सेट करने की आवश्यकता है , तो आप तत्वों और तत्वों के शॉर्टहैंड के dlरूप में display: flexbox; display: -webkit-flex; display: flex;और जैसे कुछ और के रूप में प्रदर्शित कर सकते हैं । लेकिन मैंने इसका परीक्षण नहीं किया है, इसलिए सावधानी के साथ संपर्क करें।flexdddtflex: 1 1 50%displaydisplay: inline-block

Answer 7

JsFiddle डेमो देखें

मुझे एक सूची की आवश्यकता थी जैसा कि एक परियोजना के लिए वर्णित है जो एक कंपनी में कर्मचारियों को दिखाया गया है, बाईं ओर उनकी तस्वीर और दाईं ओर जानकारी है। मैं हर के बाद psuedo- तत्वों का उपयोग करके समाशोधन को पूरा करने में कामयाब रहा DD:

.myList dd:after {
  content: '';
  display: table;
  clear: both;
}

इसके अलावा, मैं चाहता था कि पाठ केवल छवि के दाईं ओर प्रदर्शित हो, बिना फ्लोट किए गए चित्र (छद्म स्तंभ प्रभाव) के तहत लपेटे बिना। यह टैग की सामग्री के आसपास DIVसीएसएस के साथ एक तत्व जोड़कर पूरा किया जा सकता है । आप इस अतिरिक्त को छोड़ सकते हैं , लेकिन की सामग्रीoverflow: hidden;DDDIVDD टैग फ़्लोट के नीचे लिपटेगी DT।

थोड़ी देर इसके साथ खेलने के बाद, मैं DTप्रति तत्व कई तत्वों का समर्थन करने में सक्षम था DD, लेकिन DDप्रति तत्व कई तत्वों का नहीं DT। मैंने अंतिम के बाद केवल स्पष्ट करने के लिए एक और वैकल्पिक वर्ग जोड़ने की कोशिश की DD, लेकिन बाद में DDतत्वों के नीचे लिपटे हुए DTतत्व (मेरा वांछित प्रभाव नहीं ... मैं चाहता था कि DTऔर DDतत्व कॉलम बनाने के लिए, और अतिरिक्त DDतत्व बहुत व्यापक थे)।

सभी अधिकारों से, यह केवल IE8 + में काम करना चाहिए, लेकिन IE7 में एक क्विक के कारण यह वहां भी काम करता है।

Comments

यहाँ आसानी से सबसे अच्छे उत्तरों में से एक है।

— माइकल अहलर्स

Answer 8

यहाँ एक और विकल्प है जो dt और dd इनलाइन को प्रदर्शित करके और फिर dd के बाद लाइन ब्रेक जोड़कर काम करता है।

dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}

यह ऊपर दिए गए नवनीत के समाधान के समान है, लेकिन इस दृष्टिकोण का उपयोग करते हुए, सामग्री एक तालिका के रूप में पंक्तिबद्ध नहीं होगी, लेकिन dd लंबाई की परवाह किए बिना तुरंत प्रत्येक पंक्ति पर dt का अनुसरण करेगी।

Answer 9

मुझे यह करने की आवश्यकता है और <dt>सामग्री के सापेक्ष <dd>सामग्री को केंद्र में रखा गया है। मैंने इस्तेमाल किया display: inline-block, साथ मेंvertical-align: middle

यहाँ कोडपेन पर पूरा उदाहरण देखें

.dl-horizontal {
  font-size: 0;
  text-align: center;

  dt, dd {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 10px);
  }

  dt {
    text-align: right;
    padding-right: 10px;
  }

  dd {
    font-size: 18px;
    text-align: left;
    padding-left: 10px;
  } 
}

Answer 10

आप dt और dd तत्वों को किस प्रकार शैली देते हैं, इस पर निर्भर करते हुए, आप एक समस्या का सामना कर सकते हैं: उन्हें समान ऊंचाई देना। उदाहरण के लिए, यदि आप उन तत्वों के निचले भाग पर कुछ दृश्यमान बॉर्डर चाहते हैं, तो आप संभवतः बॉर्डर को उसी ऊँचाई पर प्रदर्शित करना चाहते हैं, जैसे तालिका में।

इसके लिए एक समाधान धोखा है और प्रत्येक पंक्ति को "डीएल" तत्व बनाते हैं। (यह एक तालिका में ट्रे का उपयोग करने के बराबर है) हम परिभाषा सूचियों के मूल हित को ढीला कर देते हैं, लेकिन समकक्ष पर यह छद्म तालिकाओं को प्राप्त करने का एक आसान तरीका है जो जल्दी और सुंदर स्टाइल में हैं।

सीएसएस:

dl {
 margin:0;
 padding:0;
 clear:both;
 overflow:hidden;
}
dt {
 margin:0;
 padding:0;
 float:left;
 width:28%;
 list-style-type:bullet;
}
dd {
 margin:0;
 padding:0;
 float:right;
 width:72%;
}

.huitCinqPts dl dt, .huitCinqPts dl dd {font-size:11.3px;}
.bord_inf_gc dl {padding-top:0.23em;padding-bottom:0.5em;border-bottom:1px solid #aaa;}

HTML:

<div class="huitCinqPts bord_inf_gc">
  <dl><dt>Term1</dt><dd>Definition1</dd></dl>
  <dl><dt>Term2</dt><dd>Definition2</dd></dl>
</div>

Comments

आप नहीं लिखते quatreVingtCinqPts? :)

— निकोडेमस 13

Answer 11

मुझे एक ऐसा समाधान मिला है जो मुझे सही लगता है, लेकिन इसके लिए अतिरिक्त <div>टैग की आवश्यकता होती है । यह पता चला है कि <table>तालिका में संरेखित करने के लिए टैग का उपयोग करना आवश्यक नहीं है , यह उपयोग करने display:table-row;और display:table-cell;शैलियों के लिए पर्याप्त है :

<style type="text/css">
dl > div {
  display: table-row;
}
dl > div > dt {
  display: table-cell;
  background: #ff0;
}
dl > div > dd {
  display: table-cell;
  padding-left: 1em;
  background: #0ff;
}
</style>

<dl>
  <div>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  </div>
  <div>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  </div>
  <div>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
  </div>
</dl>

Comments

यह XHTML क्यों नहीं है?

— Derick Schoonbee

@DerickSchoonbee - क्योंकि dls को केवल बच्चों के रूप में dts और dds की अनुमति है । dts में केवल बच्चों के रूप में इनलाइन तत्व हो सकते हैं। dds, किसी कारण से, बच्चों के रूप में ब्लॉक-स्तरीय तत्व हो सकते हैं।

— एंथनी

-1 मान्य HTML 4, XHTML 1, या HTML 5. मूल रूप से, आप केवल अपने जैसाDI तत्व नहीं चाहते हैं । लेकिन ऐसे किसी भी तत्व के साथ, आपको सीएसएस तालिकाओं की तरह गूढ़ सामान की आवश्यकता नहीं है ... किसी भी तरह, वह तत्व मौजूद नहीं है, और इसलिए आपको इसका उपयोग नहीं करना चाहिए।

— एंड्रियास रिजेब्रांड

@AndreasRejbrand DI तत्व मान्य HTML5 या तो नहीं है

— AlexMorley-Finch

@ AlexMorley- फिंच: मुझे पता है। यही कारण है कि मैंने कहा कि मैं है चाहता था इस तरह के एक तत्व (डीआई XHTML 2.0 से है)। वैसे, IH Hickson, WHATWG HTML 5 संपादक, ने मुझे एहसास कराया कि run-inसीएसएस displayमूल्य बिल्कुल वही है जो मैं चाहता हूं (मेरे मामले में, मुझे सरल नाम-मूल्य मेटाडेटा सूची चाहिए)।

— एंड्रियाज रिब्रांडैंड

Answer 12

मुझे हाल ही में इनलाइन तत्वों द्वारा पालन किए जाने वाले तत्वों dl-inlineपर कक्षा निर्दिष्ट करके इनलाइन और गैर-इनलाइन डीटी / डीडी जोड़े को मिलाने की आवश्यकता थी ।<dt><dd>

dt.dl-inline {
  display: inline;
}
dt.dl-inline:before {
  content:"";
  display:block;
}
dt.dl-inline + dd {
  display: inline;
  margin-left: 0.5em;
  clear:right;
}

<dl>
    <dt>The first term.</dt>
    <dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt class="dl-inline">The second term.</dt>
    <dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt class="dl-inline">The third term.</dt>
    <dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt>The fourth term</dt>
    <dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
</dl

>

Answer 13

यह IE7 + पर काम करता है, मानकों के अनुरूप है, और अलग-अलग ऊंचाइयों की अनुमति देता है।

<style>
dt {
    float: left;
    clear: left;
    width: 100px;        
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}
</style>

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>        

JSFiddle देखें ।

Answer 14

यह उन्हें सीमा के साथ तालिका के रूप में प्रदर्शित करने के लिए काम करता है, यह पहले कॉलम की चौड़ाई 3em के साथ उत्तरदायी होना चाहिए। शब्द-आवरण किसी भी शब्द को स्तंभ की तुलना में व्यापक रूप से तोड़ता है

 dl { display:block;
      border:2px solid black;
      margin: 1em;}  
 dt { display:inline-block;
      width:3em;
      word-wrap:break-word;} 
 dd { margin-left:0;
      display:inline;
      vertical-align:top;
      line-height:1.3;} 
 dd:after { content:'';display:block; } 

के <table>साथ तुलना <dl>:

<!DOCTYPE html>
<html>
<style>

dl { display:block;border:2px outset black;margin:1em; line-height:18px;}  
dt { display:inline-block;width:3em; word-wrap:break-word;} 

dd { margin-left:0; display:inline; vertical-align:top; line-height:1.3;} 
dd:after { content:'';display:block; } 


.glosstable { border:2px outset #aaaaaa;margin:1em; text-align:left}  
.glosstable, table, tbody,  tr,  td, dl, dt {font-size:100%; line-height:18px;}

.glossaz { font-size:140%;padding-left:2em;font-weight:bold;color: #00838c; } 
td.first {width: 2.5em;} 
</style>
<body>
Table<br>
<table class="glosstable">
  <tr><td class="first">Milk</td>
  <td class="glossdata">Black hot drink</td>
</tr>
  <tr><td class="first">Coffee2</td>
  <td class="glossdata">Black hot drink</td>
</tr>
  <tr><td>Warm milk</td>
  <td class="glossdata">White hot drink</td>
</tr>
</table>
DL list <br>
<dl class="glosstablep">
  <dt>Milk</dt>
  <dd class="glossdata">White cold drink</dd>
  <dt>Coffee2</dt>
  <dd class="glossdata">Black cold drink</dd>
  <dt>Warm Milk</dt>
  <dd class="glossdata">White hot drink</dd>
</dl>

</body>
</html>

Answer 15

मैं आमतौर पर निम्नलिखित के साथ शुरू करता हूं जब स्टाइल परिभाषा परिभाषा तालिकाओं के रूप में सूचीबद्ध होती है:

dt,
dd{
    /* Override browser defaults */
    display: inline;
    margin: 0;
}

dt  {
    clear:left;
    float:left;
    line-height:1; /* Adjust this value as you see fit */
    width:33%; /* 1/3 the width of the parent. Adjust this value as you see fit */
}

dd {
    clear:right;
    float: right;
    line-height:1; /* Adjust this value as you see fit */
    width:67%; /* 2/3 the width of the parent. Adjust this value as you see fit */
}

Answer 16

यहां जिन लोगों ने सुझाव दिया है उनमें से अधिकांश काम करते हैं, हालांकि आपको स्टाइल शीट में केवल जेनेरिक कोड रखना चाहिए और नीचे दिए गए HTML कोड के विशिष्ट कोड को रखना चाहिए। अन्यथा आप एक फूला हुआ स्टाइल शीट के साथ समाप्त हो जाएगा।

यहाँ है कि मैं यह कैसे करते हैं:

आपका स्टाइल शीट कोड:

<style>
    dt {
        float:left;
    }
    dd {
        border-left:2px dotted #aaa;
        padding-left: 1em;
        margin: .5em;
    }   
</style>

आपका html कोड:

<dl>
    <dt>1st Entity</dt>
    <dd style="margin-left: 5em;">Consumer</dd>
    <dt>2nd Entity</dt>
    <dd style="margin-left: 5em;">Merchant</dd>
    <dt>3rd Entity</dt>
    <dd style="margin-left: 5em;">Provider, or cToken direct to Merchant</dd>
    <dt>4th Entity</dt>
    <dd style="margin-left: 5em;">cToken to Provider</dd>
</dl>

इस तरह दिखता है

Comments

मैं मार्जिन-लेफ्ट को दोहराने के खिलाफ सलाह दूंगा जब इसे स्टाइल शीट में स्थानांतरित किया जा सकता है - वे कोड डुप्लिकेट को रोकने के लिए हैं। स्टाइल शीट ब्लोट को सुसंगत डिजाइन के साथ काउंटर किया जा सकता है; लेकिन फिर भी - अगर ब्लोट को रोकना नेटवर्क ट्रैफ़िक को बचाने के लिए है, तो इसे अभी भी HTML के बजाय स्टाइल शीट में चिपकाकर सहेजा जाता है।

— इरिडन

-1 क्षमा करें। इनलाइन शैलियों का उपयोग न करें, जब तक कि वास्तव में आपके पास वास्तव में कोई अन्य विकल्प न हो, अन्यथा, आप शुरू करने के लिए वास्तव में गड़बड़ HTML मार्कअप के साथ समाप्त हो जाएंगे।

— एमईएम

मुझे लगता है कि यह एक विरोधी पैटर्न है।

— डेनिस इवानोव