How to add a line break
in
in HTML


Tags: html,css

Problem :

I am trying to add a break in the definition list but it says that it is not allowed as child element in dl. How do I put a break without using br in HTML?

<dl>
  <dt>Activities</dt>
  <dd>- Trekking</dd>
  <dd>- Rappelling</dd>
  <dd>- Kayaking</dd>
  <dd>- Rock Climbing</dd>
  <dd>- Cycling</dd>
  <dt>Hobbies</dt>
  <dd>- Dancing</dd>
  <dd>- Listening to Music</dd>
  <dd>- Reading Novels</dd>
  <dd>- Android Programming</dd>
</dl>

My CSS code:

dl {
  margin-top: 0;
  margin-bottom: 21px;
}
dt, dd {
  line-height: 1.42857143;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}


Solution :

You may not use br in dl, but you can use it in dt and dd. Like this:

<dl>
  <dt>Hot<br />Coffee</dt>
  <dd>Black hot<br />drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink<br /></dd>
</dl>

    CSS Howto..

    How to use css in asp.net

    How do I animate a div with css3 to move and spin?

    Letters appear out of the comment box in php site after comment is added. How to limit the shown letters per line?

    How to draw a shape using a piece of image in php

    How to change table cell colour to default on triple click html5/javascript/css

    how to change css content attribute of a list item

    How to set padding on the container?

    How do I tell what are the ids and classes of a rail html.erb component?

    How to remove space after div in my td when one div uses “relative” position?

    How to apply css class to a based on respective $value in a of that row in a repeat region

    how to center a div without width?

    How to scroll with large pages with jQuery onepage-scroll plugin?

    How to use HTML classes and ID's

    CSS - How to make a relative element follow me up and down but not left and right?

    HTML, CSS. Show the second node first before the first node in MOBILE site

    My entire text in aspx page font be in arial. How to change it in css [closed]

    How to add a scrollbar to an HTML5 table?

    How to override overridden class — CSS

    how to add css code on jquery?

    Floating of Divs not exact. How to arrange them the right way?

    How to property adjust table?

    How to make a smooth transition for css controlled by jQuery?

    How to change the content value of iconmoon font?

    How to call particular CSS file only for desktop not for mobile [closed]

    How to remove css from DOM

    How to make the width of a div in the middle responsive

    How to have render big chunk of html inside a javascript forloop

    How to make image override parent width and stretch to browser width?

    How to have two background-images with CSS? [duplicate]

    How do I horizontally extend the clickable area of an inline span?