Display Definition Term and Description Inline

Definition list with inline pairs

Try this:

dt, dd { float: left }
dt { clear:both }

Add margin-bottom to dt dd if you'd like more space between them..

How to style dt and dd so they are on the same line?

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>

Can I render a DT on the same line as its DD?

Ok this works just the way you wanted. I fixed wazaminator code so that it works across browsers. The problem was that a few browsers add a margin-start for dds. I didn't test in IE:

dt {
  float: left;
  clear: left;
  margin-right: 5px;
  font-weight: bold;
}

dd {
  margin-left: 0px;
}

http://jsfiddle.net/sPQmw/18/

Is it okay to hide (display: none;) the definition term (dt) in a definition list (dl)?

If you're going to go with the second you shouldn't use display: none;. You'd be better off positioning the text off screen so screen readers can still get at it.

dt {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

Inline description list with hanging indent

You can consider negative margin that you rectify with a positive padding and you will get the same effect:

dl { padding-left:2em;}dt,dd {  display: inline;  margin:0;  padding:0;}dt { margin-left:-2em;}
dd:after {  content:"";  display:block;}dt {  font-weight: bold;}

<dl>  <dt>H:</dt>  <dd>Himenaeos</dd>  <dt>U:</dt>  <dd>Ullamcorper</dd>  <dt>Lorem Ipsum pulvinar ullamcorper nulla facilisi integer lacinia massa cras sed risus:</dt>  <dd>Lectus orbi in dui quis est pulvinar ullamcorper nulla facilisi integer lacinia sollicitudin massa cras metus sed aliquet risus a tortor id quam.</dd>  <dt>Vestibulum sed aliquet risus a tortor integer id quam morbi mi quisque nisl felis venenatis tristique dignissim in ultrices sit amet augue proin sodales libero eget ante nulla quam aenean laoreet:</dt>  <dd>Vestibulum risus a tortor integer</dd>  <dt>Q:</dt>  <dd>Quisque</dd></dl>

---

Related Topics