Question

如果没有表格，你会如何对齐这样的文字？

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

Answer 1

使用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

Answer 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/

Answer 3

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

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

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

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

Answer 4

也许是这样的

td{
text-align:center;
}

您可以使用右中左对齐值进行text-align

Answer 5

像这样：

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

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

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


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

Answer 6

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 7

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

HTML

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

CSS

p:before { content: "*"}

Fiddle

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

7 个答案: