How to style a list like the following?

Question

I want to right and left align a list but i'm not sure the best way to do this with html and css.

I want it to look something like this.

    Name: John Doe
   Email: someone@example.com
Birthday: January 01, 1971
  Gender: Male

What you want is a [description list](http://www.w3schools.com/tags/tag_dl.asp). That should make your life way easier. — Parthian Shot, Aug 14 '14 at 18:29
Have you attempted anything yet? This question is far too broad to answer. There's many ways of doing this (inline-block, table, flexbox, to name a few) — rink.attendant.6, Aug 14 '14 at 18:34
I'm not sure how to even start this that's why I posed on here. — Markaway, Aug 14 '14 at 18:36
Check this out: http://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line — El Guapo, Aug 14 '14 at 19:07
How is this too broad? I asked a simple question on html/css formatting? — Markaway, Aug 15 '14 at 14:01

score 3 · Answer 1 · edited Aug 14 '14 at 18:39

3

You can use the description list tag, fiddle here: http://jsfiddle.net/jmhk9bjs/ more info here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

It will be something like this

<dl>
    <dt>
        Name
    </dt>
    <dd>
        John Doe
    </dd>
</dl>

CSS

dl dt, dl.inline dd {
    float: left;
}
dl dd + dt, dl.inline dd + dd {
    clear: left
}
dl.inline dd + dd {
    float: none
}
dl.inline dt {
    font-weight: bold
}

edited Aug 14 '14 at 18:39

Huangism

16,278
7
48
74

answered Aug 14 '14 at 18:30

pollirrata

5,188
2
32
50

3

`with html and css` Last time I checked, description lists are only HTML. He also wanted CSS. Which, incidentally, is why when I pointed him to description lists 45 seconds before you did, I gave it as a comment and not an answer. Add CSS and this will be a complete, helpful answer which I'll upvote. Don't add CSS and I'll downvote. – Parthian Shot Aug 14 '14 at 18:32
That answer does not work, even with the CSS. – Markaway Aug 14 '14 at 18:41
How would I properly right align the "dt" and put 4px padding between the dt and dd? – Markaway Aug 14 '14 at 18:45
2

It almost sounds like you don't know css at all – Huangism Aug 14 '14 at 18:46
I'm not that great at it but I'm learning from SO. – Markaway Aug 15 '14 at 20:48

score 0 · Answer 2 · answered Aug 14 '14 at 18:46

0

with a simple list, you may use class and pseudo elements : DEMO

<ul class="centerhem">
  <li class="Name">John doe</li>
  <li class="Email"><span class="Hide" data-name="J-doe" data-com="domain.org"></span></li>
  <li class="Birthday">January, 01, 01</li>
  <li class="Gender">Male</li>
</ul>

And some style:

.centerhem {
  list-style-type:none;
  display:table;
  border:solid;
  padding:0;
  margin:1em auto;
}
.centerhem li:before {
  content:attr(class)' : ';
  display:inline-block;
  width:5em;
  text-align:right;
  margin-right:0.25em;
  color:#A56F10;
}
li {
  color:#1A97D4;
  width:15em;
}
li span.Hide:before {
  content:attr(data-name)'@'attr(data-com);
}

Class can be reused any time.

data-attributes within the span is to try to hide email from spammer harvest.

answered Aug 14 '14 at 18:46

G-Cyrillus

101,410
14
105
129

I tried using this and everything remains left aligned. – Markaway Aug 14 '14 at 19:02
Have you any evidence that hiding e-mails that way actually cuts down significantly on spam traffic to the address? Or did you just come up with it / read it somewhere, think it was cool, and then recommend as a best practice something that would be a pain to use and would screw with screen readers? – Parthian Shot Aug 14 '14 at 20:42
(Despite how it might come off, that's a genuine question. If that _does_ have a demonstrated and significant effect on spam traffic, it's good to have the data.) – Parthian Shot Aug 14 '14 at 20:44
generated content doesn't exist witout CSS and cannot be selected, as long as spammer robot do not look for it, they do not find it. i wrote TRY, and used data-attributes to break it into pieces. It is a cheap way :) . I gave already such an answer in here couple of days ago. I do not read that much :) – G-Cyrillus Aug 14 '14 at 21:20
@ParthianShot , thanks for your feed back and interest, i obviously did not think about screen readers, do they really skip generated content ? just seen this http://www.456bereastreet.com/archive/201205/css_generated_content_and_screen_readers/ thx – G-Cyrillus Aug 14 '14 at 21:27

score 0 · Answer 3 · answered Aug 14 '14 at 18:55

You can also use floating divs: http://jsfiddle.net/ctwheels/pnh920qn/

HTML

<div id="left">
    <div>Name</div>
    <div>Email</div>
    <div>Birthday</div>
    <div>Gender</div>
</div>
<div id="right">
    <div>John Doe</div>
    <div>someone@example.com</div>
    <div>January 01, 1971</div>
    <div>Male</div>
</div>

CSS

div {
    color:#05BEE3;
}
#left {
    float:left;
}
#left>div{
    text-align:right;
}
#left>div:after{
    content:":";
}
#right {
    float:left;
    margin-left:10px;
}

I'm just wondering why this answer was downvoted? It does exactly what the OP asked. — ctwheels, Aug 14 '14 at 19:01

How to style a list like the following?

3 Answers3