Dimitri Dewaele
Dimitri Dewaele

Reputation: 10669

HTML text list with explanation

I want to present a basic text list with explanation. See screenshot (this was done in a text editor).

I was thinking of a html table, but I don't succeed in simulating this easily. Any suggestions?

enter image description here

I would like to use a table instead of a div, since this allows me to easily add new lines. Most html-editors allow to just use TAB to add a new line.

The problem is the css: How can I get the lines close to each other?

DIV example (thanks Sylent):

.divClass {
  display: table-row;
}

.divClass div {
  padding: 3px;
  display: table-cell;
}
<div class="divClass">
    <div>description</div>
    <div>Descriptive test with info.</div>
</div>
<div class="divClass">
    <div>description</div>
    <div>Descriptive test with info.</div>
</div>

* Table example:*

.divClass {
  display: table-row;
}

.divClass div {
  padding: 3px;
  display: table-cell;
}
<table class="divClass">
    <tr>
        <td>definition</td>
        <td>Descriptive test with info.</td>
    </tr>
    <tr class="divClass">
        <td>definition</td>
        <td>Descriptive test with info.</td>
    </tr>
</table>

Upvotes: 0

Views: 170

Answers (1)

Sylent
Sylent

Reputation: 514

Made this with <div> and some CSS.

html:

<div class="divClass">
        <div>some text</div>
        <div>some text</div>
    </div>
    <div class="divClass">
        <div>some text</div>
        <div>some text</div>
    </div>

css:

.divClass {
  display: table-row;
}

.divClass div {
  padding: 3px;
  display: table-cell;
}

Hope this displays it well enough for you :D .

Upvotes: 1

Related Questions