কীভাবে ডিটি এবং ডিডি স্টাইল করবেন যাতে তারা একই লাইনে থাকে?

Question

সিএসএস ব্যবহার করে, আমি কীভাবে নিম্নলিখিতগুলি স্টাইল করতে পারি:

<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

শুধু একটি দরকারী নোট হিসাবে: আপনি DTS এবং DDS লাইনের মধ্যে ফাঁক নিয়ন্ত্রণ ওয়ানা, এই চেক করুন: stackoverflow.com/q/896815/114029 এই শক্তিশালী ট্যাগ styling ফরম সত্যিই সহজ এবং সুন্দর করতে।

— লেনিয়েল ম্যাককাফেরি

আরো দেখুন stackoverflow.com/questions/896815/... বিশেষ করে গৃহীত উত্তর stackoverflow.com/a/896840/1037948

— drzaus

: দয়া করে এই গৃহীত উত্তর পরিবর্তন করার ব্যাপারে বিবেচনা stackoverflow.com/a/44599527/3853934

— মাইকেল 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

ধন্যবাদ! এই সিএসএস টিপটি আমাকে বিন্যাস ডেকরেটার ক্লাস না করেই আমার জেন্ডার ফর্ম্যাটটি ফর্ম্যাট করতে সহায়তা করেছে।

— devNoise

আপনি এই পদ্ধতিটি ব্যবহার করে "সারি" এর বাইরে একটি নীচের মার্জিন বা প্যাডিং তোয় স্পেস যুক্ত করতে সক্ষম হবেন বলে মনে হয় না।

— গ্রোক

আমি clear: leftমোড় দেওয়ার প্রয়োজন পরেও তারা ইনলাইন থাকে তা নিশ্চিত করতে ডিটি স্টাইলে একটি যুক্ত করার পরামর্শ দিই ।

— সাইমন

* { ... }বিবৃতি সবকিছু মার্জিন এবং প্যাডিং হারান তোলে, এবং এটি সরানোর ডিএল বিকৃত। ক্লাস ব্যবহার করে কৌশলটি আর হয় না। দেখে মনে হচ্ছে আমি ডিএল ছাড়া আর কিছু চাইলে আমাকে সর্বত্র মার্জিন এবং প্যাডিং ছাড়াই যেতে হবে ... বা?

— এর্ক

আপনি <dd> এর প্রথম শব্দটি যখন নির্বাচন করেন (ডাবল ক্লিক করুন) তখন এটি বিশ্রীভাবে আচরণ করে। <dt> এবং <dd> এর মধ্যে শ্বেত স্পেস (বা যদি আপনি এইচটিএমএলমিন ব্যবহার করছেন) না থাকে তবে এটি <dt> এর ভিতরে লেখাটি নির্বাচন করে।

— কেফাঙ্ক

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

আপডেট - 3 ^য় জানুয়ারী 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: আমি মনে করি, ফ্লেক্স ভিত্তিক সমাধান দীর্ঘ পাঠ্য কেস পরিচালনা করতে পারে। ধন্যবাদ :)

— নবানীথ

নিভানাথ গ্রেট সলান। শব্দ এবং সংজ্ঞাটির মধ্যে বিন্দু পেতে আমি যুক্ত করেছি: dl.inline-flex dt: পরে {বিষয়বস্তু: "................" "আমি এখানে নিশ্চিত করতে এখানে 150 টি বিন্দু ব্যবহার করি যথেষ্ট আপনার সাদা স্থানও যুক্ত করতে হবে: এখনই

— তারিখটি

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 t dt {ফন্ট-ওজন: 700} ডিডি {মার্জিন-বাম: 0} .dl- অনুভূমিক dt {ভাসা: বাম; প্রস্থ: 160px; স্পষ্ট: বাম; পাঠ্য-সারিবদ্ধ: ডান; ওভারফ্লো: লুকানো; পাঠ্য-ওভারফ্লো: উপবৃত্ত; সাদা-স্থান: নরপ} .dl- অনুভূমিক ডিডি {মার্জিন-বাম: 180px}

— টিম ফ্র্যাঙ্কলিন

dl-horizontalআসলে বুটস্ট্র্যাপ 4. ইন BS4 থেকে বাদ পড়েন আপনি যদি এর পরিবর্তে গ্রিড শ্রেণীর ব্যবহার করতে হবে।

— স্ক্র্যাবলমাচারার

Answer 5

ধরে নিচ্ছি আপনি মার্জিনের প্রস্থটি জানেন:

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

Comments

আমি এটিকে পরিষ্কার বলব না, কারণ আপনি মার্জিনগুলিকে হার্ডকোড করেছেন

— লিয়াম ডসন

পরিষ্কার: একটি সাধারণ, ভাল সংজ্ঞায়িত এবং আনন্দদায়ক আকার রয়েছে। উত্তর সংক্ষিপ্ত। এটি তিনটি বিবৃতিতে সমস্যাটি সমাধান করে। মার্জিনটি জানা না থাকা প্রশ্নের অংশ হিসাবে প্রয়োজন ছিল না।

— পূর্বপুরুষ

ক্লিন সাধারণত প্রশ্নের এই শৈলীতে মার্কআপের জন্য ব্যবহৃত হয়। যাইহোক, স্ট্যাকওভারফ্লোতে আপনাকে স্বাগতম, এবং আমি আপনাকে কেবলমাত্র স্পষ্টতার জন্য, এই ধরণের অনুমানগুলি আপনার প্রশ্নের শরীরে রাখার পরামর্শ দিচ্ছি।

— লিয়াম ডসন

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;এবং flexএর সাধারণভাবে সংক্ষেপে ddউপাদান এবং dtভালো কিছু উপাদান flex: 1 1 50%এবং displayযেমন display: inline-block। তবে আমি এটি পরীক্ষা করিনি, সুতরাং সাবধানতার সাথে যোগাযোগ করুন।

Answer 7

JsFizz ডেমো দেখুন

আমার কোনও প্রকল্পের জন্য বর্ণিত ঠিক সেই তালিকাটির দরকার ছিল যা কোনও সংস্থার কর্মীদের, বাম দিকে তাদের ফটো এবং ডানদিকে তথ্য প্রদর্শন করে। আমি প্রতিটির পরে পিচুইডো-এলিমেন্ট ব্যবহার করে ক্লিয়ারিংটি সম্পন্ন করতে সক্ষম হয়েছি DD:

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

তদ্ব্যতীত, আমি চাইছিলাম যে টেক্সটটি কেবল ভাসমান চিত্রের (পদ্ম-কলামের প্রভাব) মোড়ক ছাড়াই চিত্রের ডানদিকে প্রদর্শিত হয় to ট্যাগের সামগ্রীর চারপাশে DIVসিএসএসের সাথে একটি উপাদান যুক্ত করে এটি সম্পাদন করা যায় । আপনি এই অতিরিক্ত বাদ দিতে পারেন , তবে ট্যাগের সামগ্রীটি ভাসমানের নীচে মোড়ানো হবে ।overflow: hidden;DDDIVDDDT

এটির সাথে কিছুক্ষণ খেলার পরে আমি DTপ্রতি একাধিক উপাদানকে সমর্থন করতে সক্ষম হয়েছি DDতবে DDপ্রতি একাধিক উপাদান নয় DT। আমি শেষের পরে কেবল সাফ করার জন্য আরেকটি alচ্ছিক শ্রেণি যুক্ত করার চেষ্টা করেছি DD, তবে পরবর্তী DDউপাদানগুলি উপাদানগুলির আওতায় DT(আমার কাঙ্ক্ষিত প্রভাব নয় ... আমি চেয়েছিলাম DTএবং DDউপাদানগুলি কলাম তৈরি করতে চেয়েছিল এবং অতিরিক্ত DDউপাদানগুলিও খুব প্রশস্ত ছিল)।

সমস্ত অধিকার অনুসারে, এটি কেবল আইই 8+ এ কাজ করা উচিত, তবে আই 7-তে একটি দুর্যোগের কারণে এটি সেখানে কাজ করে।

Comments

সহজেই এখানে সেরা উত্তরগুলির একটি।

— মাইকেল আহলাররা

Answer 8

এখানে আরও একটি বিকল্প রয়েছে যা dt এবং dd ইনলাইন প্রদর্শন করে এবং তারপরে dd এর পরে একটি লাইন বিরতি যুক্ত করে কাজ করে।

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

এটি উপরের নবানীথের সমাধানের অনুরূপ, তবে এই পদ্ধতির ব্যবহার করে বিষয়বস্তুটি কোনও টেবিলের মতো হবে না, তবে দৈর্ঘ্য নির্বিশেষে ডিডি প্রতিটি লাইনেই ডিটি অনুসরণ করবে।

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

আপনি কীভাবে ডিটি এবং ডিডি উপাদানগুলি স্টাইল করেন তার উপর নির্ভর করে আপনি একটি সমস্যার মুখোমুখি হতে পারেন: এগুলি একই উচ্চতা তৈরি করে। উদাহরণস্বরূপ, আপনি যদি এই উপাদানগুলির নীচে কিছু দৃশ্যমান সীমানা দেখতে চান তবে আপনি সম্ভবত সারণির মতো একই উচ্চতায় সীমানাটি প্রদর্শন করতে চান।

এর একটি সমাধান হ'ল প্রতারণা করা এবং প্রতিটি সারিকে একটি "ডিএল" উপাদান তৈরি করুন। (এটি একটি টেবিলের মধ্যে ট্র ব্যবহারের সমতুল্য) আমরা সংজ্ঞা তালিকার মূল আগ্রহটি ছেড়ে দিই, তবে প্রতিযোগিতায় এটি দ্রুত এবং সুন্দর স্টাইলযুক্ত সিউডো-টেবিলগুলি পাওয়ার সহজ উপায়।

সিএসএস:

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

এইচটিএমএল:

<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

কেন এটি এক্সএইচটিএমএল অনুগত নয়?

— ডেরিক শুনবি

@ ডেরিকশুনবি - কারণ dlকেবলমাত্র শিশুদেরই dts এবং dds করার অনুমতি রয়েছে । dts এর শিশু হিসাবে কেবল ইনলাইন উপাদান থাকতে পারে। dds, কোনও কারণে, শিশু হিসাবে ব্লক-স্তরের উপাদান থাকতে পারে।

— অ্যান্টনি

-1 বৈধ না এইচটিএমএল 4, এক্সএইচটিএমএল 1, বা HTML 5. মূলত, আপনি শুধু চাই DIউপাদান নিজেকে ভালো । তবে এই জাতীয় কোনও উপাদানের সাথে আপনার সিএসএস টেবিলের মতো মোটামুটি স্টাফের দরকার নেই ... যাইহোক, সেই উপাদানটির অস্তিত্ব নেই এবং তাই আপনার এটি ব্যবহার করা উচিত নয়।

— আন্দ্রেয়াস রেজব্রান্ড

— @ আন্ড্রেয়াস রেজব্র্যান্ড

@ অ্যালেক্সমারলি-ফিঞ্চ: আমি জানি। এটা কেন আমি বললাম আমি এর চেয়েছিলেন এমন একটি উপাদান (ডিআই এক্সএইচটিএমএল 2.0 থেকে)। যাইহোক, WHATWG এইচটিএমএল 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

এটি আই 7 + এ কাজ করে, এটি মানদণ্ডের সাথে সম্মতিযুক্ত এবং ভিন্ন উচ্চতাগুলিকে অনুমতি দেয়।

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

জেএসফিডল দেখুন ।

Answer 14

এটি তাদের সীমান্ত সহ, টেবিল হিসাবে প্রদর্শন করতে কাজ করে, এটি প্রথম কলামের প্রস্থের 3 ম প্রস্থের সাথে প্রতিক্রিয়াশীল হওয়া উচিত। শব্দ-মোড়ানো কেবল কলামের চেয়ে বৃহত্তর কোনও শব্দকে ভেঙে দেয়

 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

এখানকার লোকেরা যা পরামর্শ দিয়েছিল তার বেশিরভাগই কাজ করে, তবে আপনার কেবল জেনেরিক কোডটি স্টাইল শীটে রাখা উচিত, এবং নীচের চিত্রের মতো নির্দিষ্ট কোডটি এইচটিএমএল কোডে স্থাপন করা উচিত। অন্যথায় আপনি একটি স্ফীত শৈলী শীট দিয়ে শেষ হবে।

এখানে আমি এটি কীভাবে করছি:

আপনার স্টাইল শীট কোড:

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

আপনার এইচটিএমএল কোড:

<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

আমি যখন মার্জিন-বামে স্টাইল শিটে স্থানান্তরিত করতে পারি তার পুনরাবৃত্তি করার বিরুদ্ধে পরামর্শ দেব - কোড নকল রোধ করতে তারা সেখানে রয়েছে are স্টাইল শীট ব্লাট সামঞ্জস্যপূর্ণ ডিজাইনের সাথে প্রতিরোধ করা যেতে পারে; তবে তারপরেও - যদি ব্লাট প্রতিরোধ করা নেটওয়ার্ক ট্র্যাফিক সংরক্ষণ করা হয় তবে এটি এখনও HTML এর পরিবর্তে স্টাইল শীটে স্টিক করে সংরক্ষণ করা হয়।

— আইরিডইন

-1 দুঃখিত ইনলাইন শৈলীগুলি ব্যবহার করবেন না, যদি না সত্যিই আপনার কাছে অন্য কোনও বিকল্প না থাকে, অন্যথায়, আপনি শুরু করতে সত্যিই অগোছালো এইচটিএমএল মার্কআপটি শেষ করবেন।

— এমএম

আমি মনে করি এটি একটি অ্যান্টি-প্যাটার্ন।

— ডেনিস ইভানভ