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

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

http://jsfiddle.net/4xq55vg6/

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

【问题讨论】:

标签: 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】:

    查看小提琴,您可以将这些行保留在 &lt;p&gt; 标记中,并在 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;
          }
          

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

          【讨论】:

            猜你喜欢
            • 2010-10-10
            • 2023-03-27
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2016-05-07
            • 1970-01-01
            • 2015-01-11
            相关资源
            最近更新 更多