如何在没有表格的情况下对齐文本答案

【问题标题】：How to align text without tables如何在没有表格的情况下对齐文本
【发布时间】：2015-02-22 12:54:25
【问题描述】：

如果没有表格，您将如何对齐这样的文本？

<table>
 <tr>
   <td>*</td>
   <td>Long Text</td>
 </tr>
 <tr>
  <td>*</td>
  <td>Long Text</td>
 </tr>
</table>

【问题讨论】：

使用 CSS text-align = value ?
错误。只需* Long Text
或使用divs 然后对齐div => stackoverflow.com/questions/21430203/…
@NoobEditor 使用 div 并对齐它们比文本对齐更难

标签： html css html-table alignment

【解决方案1】：

最后，我使用了一个有点复杂的解决方案：

http://jsfiddle.net/4xq55vg6/10/

p
{
    margin-left: 1.5em;
    display: block;
}

p:before
{
    content: "*";
    margin-left: -1em;
    display: inline-block;
    position: absolute;
}

【讨论】：

【解决方案2】：

您可以使用浮动 div 来做到这一点。

<div>
  <div class="leftDiv">*</div>
  <div class="rightDiv">Long Text</div>
  <div class="leftDiv">*</div>
  <div class="rightDiv">Long Text</div>
</div>

然后在 CSS 中将它们彼此相邻浮动

.leftDiv
{
    clear:both;
    width:5%;
    float:left;
}
.rightDiv
{
    width:95%;
    float:left;
}

http://jsfiddle.net/u6kwbm0b/

【讨论】：

5% 不会造成与原版相同的外观。当你把屏幕变窄时，文字会流入星号。
例如，5% 更多，事后看来，1em 可能会更好，尽管随着屏幕尺寸的减小，这会导致右侧 div 向下流动。

【解决方案3】：

查看小提琴，您可以将这些行保留在 <p> 标记中，并在 CSS 中添加 content: "*" 之前

HTML

<p>This is a long text... </p>
<p>And here is another text....</p>

CSS

p:before { content: "*"}

Fiddle

【讨论】：

很好很简单，但是包裹的文本将保留在星号下，不会留在它自己的“单元格”中
啊，那么您将必须为 * 提供一个新元素并让它像其他答案一样浮动

【解决方案4】：

    ul {
      list-style: none;
      margin-left: 0;
      padding-left: 1em;
      text-indent: -1em;
    }

<ul>
  <li>* This is a ... ng it?</li>
  <li>* And here is an ... way of doing it?</li>
</ul>

http://jsfiddle.net/4xq55vg6/5/

【讨论】：

【解决方案5】：

使用display:inline-block 属性

<div class="a">

    <p class="p1">*</p>
    <p  class="p2">kjwhkwgkufygajkfgxaskjfgkj hsgdfjkagsdkufygukasygfkjsghadfjkghfjkahgxf jasghdfkjaghxfkjkjasghfuhxg kjasdgh</p>
</div>
<div class="a">

    <p class="p1">*</p>
    <p  class="p2">kjwhkwgkufygajkfgxaskjfgkj hsgdfjkagsdkufygukasygfkjsghadfjkghfjkahgxf jasghdfkjaghxfkjkjasghfuhxg kjasdgh</p>
</div>

css

.p1{
    width:2%;
    display:inline-block;
    vertical-align:top;
}
.p2{
      width:80%;
    display:inline-block;
        vertical-align:top;
}
.a{
    width:600px;
}

link

【讨论】：

【解决方案6】：

像这样：

<div style="width:100%;text-align:center">Hello</div>

当然你不应该使用内联样式。更好：

<div class="aClass">Hello</div>


.aClass{text-align:center;width:100%;}

【讨论】：

【解决方案7】：

可能是这样的

td{
text-align:center;
}

您可以使用右中左对齐值进行文本对齐

【讨论】：