如何设置如下样式的列表？ [关闭]答案

【问题标题】：How to style a list like the following? [closed]如何设置如下样式的列表？ [关闭]
【发布时间】：2014-08-15 02:55:33
【问题描述】：

我想左右对齐列表，但我不确定使用 html 和 css 执行此操作的最佳方法。

我希望它看起来像这样。

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

【问题讨论】：

你想要的是description list。这应该会让你的生活更轻松。
您尝试过什么吗？这个问题太宽泛了，无法回答。有很多方法可以做到这一点（inline-block、table、flexbox 等等）
我什至不知道如何开始这就是我在这里摆姿势的原因。
看看这个：stackoverflow.com/questions/1713048/…
这怎么太宽泛了？我问了一个关于 html/css 格式的简单问题？

标签： css html

【解决方案1】：

您可以使用描述列表标签，在这里摆弄：http://jsfiddle.net/jmhk9bjs/ 更多信息在这里https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

会是这样的

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

【讨论】：

with html and css 上次我检查时，描述列表只是 HTML。他还想要 CSS。顺便说一句，这就是为什么当我在你之前 45 秒将他指向描述列表时，我将其作为评论而不是答案给出。添加 CSS，这将是一个完整、有用的答案，我会赞成。不要添加 CSS，我会投反对票。
这个答案不起作用，即使使用 CSS。
如何正确对齐“dt”并在 dt 和 dd 之间放置 4px 填充？
听起来你好像根本不懂css
我不是很擅长，但我正在向 SO 学习。

【解决方案2】：

使用简单的列表，您可以使用class 和伪元素：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>

还有一些风格：

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

类可以随时重用。

跨度内的数据属性是尝试隐藏垃圾邮件发送者收割的电子邮件。

【讨论】：

我试过用这个，一切都保持左对齐。
您是否有任何证据表明以这种方式隐藏电子邮件实际上可以显着减少该地址的垃圾邮件流量？还是您只是想出它/在某个地方读到它，认为它很酷，然后推荐一些使用起来很痛苦并且会与屏幕阅读器混淆的东西作为最佳实践？
（尽管它可能会失效，但这是一个真正的问题。如果这确实对垃圾邮件流量有明显且显着的影响，那么拥有数据是件好事。）
生成的内容在没有CSS的情况下不存在并且无法选择，只要垃圾邮件发送机器人不寻找它，他们就找不到它。我写了 TRY，并使用数据属性将其分解为碎片。这是一种便宜的方式:)。几天前我已经在这里给出了这样的答案。我没有读那么多:)
@ParthianShot，感谢您的反馈和兴趣，我显然没有考虑屏幕阅读器，他们真的跳过生成的内容吗？刚刚看到这个456bereastreet.com/archive/201205/…thx

【解决方案3】：

您也可以使用浮动 div：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;
}

【讨论】：

我只是想知道为什么这个答案被否决了？它完全符合 OP 的要求。