วิธีจัดรูปแบบ dt และ dd เพื่อให้อยู่ในบรรทัดเดียวกัน

ใช้ 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ในบรรทัดเดียวกัน เช่นผลิตสิ่งที่ดูเหมือนว่า:

ฉันมีวิธีแก้ปัญหาโดยไม่ใช้ Floats!
ตรวจสอบนี้ใน codepen

ได้แก่

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 ^ถมกราคม 2017:ฉันได้เพิ่มการแก้ปัญหาตามดิ้นกล่องสำหรับปัญหาที่เกิดขึ้น ตรวจสอบว่าในcodepen ที่เชื่อมโยงและปรับแต่งตามความต้องการ ขอบคุณ!

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;
}

เค้าโครง CSS Grid

เช่นเดียวกับตารางเค้าโครงของกริดทำให้ผู้เขียนสามารถจัดองค์ประกอบเข้ากับคอลัมน์และแถวได้
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>

หากคุณใช้ Bootstrap 3 (หรือก่อนหน้า) ...

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

สมมติว่าคุณทราบความกว้างของระยะขอบ:

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

เนื่องจากฉันยังไม่ได้เห็นตัวอย่างที่เหมาะกับกรณีการใช้งานของฉันนี่คือโซลูชันที่พิสูจน์ได้อย่างสมบูรณ์แบบที่สุดที่ฉันสามารถรับรู้ได้

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>+1 (800) 555-1234</dd>
  <dt>Email Address</dt>
  <dd><a href="#">example@example.com</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;และflexชวเลขของddองค์ประกอบและdtองค์ประกอบเป็นสิ่งที่ชอบflex: 1 1 50%และเป็นdisplay display: inline-blockแต่ฉันยังไม่ได้ทดสอบดังนั้นให้เข้าหาด้วยความระมัดระวัง

ดู ตัวอย่าง jsFiddle

ฉันต้องการรายการตรงตามที่อธิบายไว้สำหรับโครงการที่แสดงพนักงานใน บริษัท พร้อมรูปถ่ายทางซ้ายและข้อมูลด้านขวา ฉันจัดการเพื่อให้การล้างสำเร็จโดยใช้องค์ประกอบ psuedo หลังจากทุกDD:

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

นอกจากนี้ฉันต้องการให้ข้อความแสดงเฉพาะทางด้านขวาของภาพโดยไม่ต้องล้อมใต้รูปภาพที่ลอย (เอฟเฟกต์คอลัมน์หลอก) สิ่งนี้สามารถทำได้โดยการเพิ่มDIVองค์ประกอบที่มี CSS overflow: hidden;รอบเนื้อหาของDDแท็ก คุณสามารถละเว้นสิ่งพิเศษนี้ได้DIVแต่เนื้อหาของDDแท็กจะถูกรวมไว้ใต้การลอยDTแท็กจะตัดภายใต้ลอย

หลังจากที่เล่นกับมันในขณะที่ผมก็สามารถที่จะสนับสนุนหลายDTองค์ประกอบต่อDDแต่ไม่หลายองค์ประกอบต่อDD DTฉันพยายามเพิ่มคลาสที่เป็นทางเลือกอื่นเพื่อล้างเฉพาะหลังจากที่ผ่านDDมา แต่DDองค์ประกอบที่ตามมาถูกรวมอยู่ภายใต้DTองค์ประกอบ (ไม่ใช่เอฟเฟกต์ที่ฉันต้องการ ... ฉันต้องการDTและDDองค์ประกอบในการสร้างคอลัมน์และส่วนเพิ่มเติมDDองค์ประกอบนั้นกว้างเกินไป)

โดยสิทธิ์ทั้งหมดนี้ควรทำงานใน IE8 + แต่เนื่องจากการเล่นโวหารใน IE7 ก็ใช้งานได้เช่นกัน

นี่เป็นอีกตัวเลือกที่ทำงานโดยการแสดง dt และ dd อินไลน์แล้วเพิ่มตัวแบ่งบรรทัดหลังจาก dd

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

สิ่งนี้คล้ายกับโซลูชันของ Navaneeth ด้านบน แต่การใช้วิธีนี้เนื้อหาจะไม่เข้าแถวเหมือนในตาราง แต่ dd จะติดตาม dt ทันทีในทุกบรรทัดโดยไม่คำนึงถึงความยาว

ฉันต้องทำสิ่งนี้และมี<dt>เนื้อหาเป็นศูนย์กลางในแนวตั้งสัมพันธ์กับ<dd>เนื้อหา ฉันใช้display: inline-blockร่วมกับvertical-align: middle

ดูตัวอย่างเต็มรูปแบบใน Codepen ที่นี่

.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;
  } 
}

คุณอาจประสบปัญหา: ทำให้องค์ประกอบเหล่านั้นมีความสูงเท่ากันทั้งนี้ขึ้นอยู่กับว่าคุณจัดองค์ประกอบองค์ประกอบ dt และ dd อย่างไร ตัวอย่างเช่นหากคุณต้องการ แต่มีขอบที่มองเห็นได้ที่ด้านล่างขององค์ประกอบเหล่านั้นคุณส่วนใหญ่อาจต้องการแสดงเส้นขอบที่ความสูงเดียวกันเช่นในตาราง

ทางออกหนึ่งสำหรับเรื่องนี้คือการโกงและทำให้แต่ละแถวเป็นองค์ประกอบ "dl" (นี่เทียบเท่ากับการใช้ tr ในตาราง) เราปล่อยความสนใจดั้งเดิมของรายการคำจำกัดความ แต่ในทางกลับกันนี่เป็นวิธีที่ง่ายในการรับตารางหลอกที่รวดเร็วและมีสไตล์

CSS:

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>

ฉันพบวิธีแก้ไขปัญหาที่สมบูรณ์แบบสำหรับฉันแล้ว แต่ต้องการ<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>

เมื่อเร็ว ๆ นี้ฉันต้องการผสมคู่ inline และ non-inline dt / dd โดยระบุ class 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

>

ใช้งานได้กับ 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

การทำงานเพื่อแสดงเป็นตารางที่มีเส้นขอบควรตอบสนองด้วย 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>

ฉันมักจะเริ่มต้นด้วยสิ่งต่อไปนี้เมื่อรายการนิยามการกำหนดสไตล์เป็นตาราง:

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 */
}

สิ่งที่คนส่วนใหญ่แนะนำให้ใช้งานได้ที่นี่ แต่คุณควรใส่รหัสทั่วไปลงในสไตล์ชีทและวางรหัสเฉพาะลงในรหัส 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>

ดูเหมือนว่านี้