Question

我有类似下面的内容。书名（可以是可变长度，来自ajax调用），价格和数量。有没有办法我可以使用CSS而不是使用表来对齐每个字段？感谢。

e.g。 HTML输出：

Emacs Handbook $10 1
Web Development In 10 Days $20 2
Car $8 3

我想：

Emacs Handbook             $10   1
Web Development In 10 Days $20   2
Car                        $8    1

Answer 1

使用表格没有任何问题。如果它是表格数据（即excel电子表格或数据库表中预期的内容），它仍然属于表格。

如果你必须坚持，你可以把它们中的每一个放在一个列表项中的一个范围内，然后设置它们的样式：

HTML：

<ul class="productList">
    <li>
        <span class="title">Emacs Handbook</span> 
        <span class="price">$50</span> 
        <span class="qty">3</span
    </li>
</ul>

CSS：

.productList span { display:inline-block;}
.productList .title { width:250px;}
.productList .price { width:50px;}
.productList .qty { width: 50px; }

Answer 2

的伪：

获得最长的标题长度; 获得最长的价格;

然后，使用javascript设置每个标题，价格和长度的持有者的CSS，

标题{left：0px;}

代价{左：标题长度+缓冲区大小（10px？）}

表示数量{左：标题长度+缓冲区大小+价格长度+缓冲区大小}

Answer 3

这样的事情：

<html>
  <head>
  <title>test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
  </script>
  <style type="text/css">
    .super-container {
      margin: 0 auto;
      width: 900px;
    }
    .table {
      float: left;
      margin-bottom: 0.5em;
      text-indent: 0.2em;
      padding: 0.1em;
      width: 100%;
    }  
    .table-header {
      font: bold 1.3em tahoma;
      width: 100%;
    }
    .table-description {
      display: block;
      font: italic 0.8em tahoma;
      text-indent: 0.6em;
      width: 100%;
    }
    .field-header {
      font: bold 1em tahoma;
      width: 100%;
    }
    .field-header, .row {
      display: block;
      float: left;
      padding-top: 0.1em;
      padding-bottom: 0.1em;
      width: 100%;
    }
    .field-header li, .row li {
      display: block;
      float: left;
      font-size: 1em;
      height: 1.4em;
      line-height: 1.4em;
    }
  </style>
</head>
<body><div class="super-container">
  <div id="table1" class="table">
    <h4 class="table-header" colspan="4">
      tbl name
    </h4>
    <span class="table-description" colspan="4">
      this is my tbl description
    </span>
    <ul class="field-header">
      <li id="a">A</li>
      <li id="b">B</li>
      <li id="c">C</li>
      <li id="d">D</li>
    </ul>
    <ul class="row">
      <li id="a"><a href="#">1a</a></li>
      <li id="b"><a href="#">1b</a></li>
      <li id="c"><a href="#">1c</a></li>
      <li id="d"><a href="#">1d</a></li>
    </ul>
    <ul class="row">
      <li id="a"><a href="#">2a</a></li>
      <li id="b"><a href="#">2b</a></li>
      <li id="c"><a href="#">2c</a></li>
      <li id="d"><a href="#">2d</a></li>
    </ul>
  </div><!-- end table -->
  <script type="text/javascript">
    $(document).ready(function(){
      var widths = {
        'a': '20%',
        'b': '50%',
        'c': '10%',
        'd': '10%'
      }
      setColumnWidths('#table1', "individually", widths);
    });

    /**
     * Set column widths of `tableless` table see above example html
     * @param tbl The id of the table as string
     * @param how How the function should set the table width as string
     * @param widths Key value pairs fieldId: value e.g { 'field1': '10px' }
     */
    function setColumnWidths(tbl, how, widths) {
      var tblRowElements = $(tbl + ' > ul');
      var tblColElements = tblRowElements.children();
      var numberOfRows = tblRowElements.length;
      var numberOfCols = tblColElements.length / numberOfRows;

      switch(how) {
        case "evenly":
          tblColElements.width( (100/numberOfCols + "%") );
          break;
        case "individually":
          var getWidth = function(property) {
            return widths[property];
          }
          tblColElements.each(function(widths){
            var elm = $(this);
            var elmId = elm.attr('id');
            elm.width(getWidth(elmId));
          });
          break;
        default:
          alert("unknown how arg passed: " + how
                  + "\n reverting to default `evenly`");
          setColumnWidths(tbl, "evenly");
          break;
      }  
    }

    </script>
  </div></body>
</html>

Answer 4

我同意在这种情况下使用表格，但是如果你想使用css（和一点点jquery）你可以使用Calvin的html：

<ul class="productList">
    <li>
        <span class="title">Emacs Handbook</span>
        <span class="price">$10</span>
        <span class="qty">1</span>
    </li>
    <li>
        <span class="title">Web Development In 10 Days</span>
        <span class="price">$10</span>
        <span class="qty">1</span>
    </li>
    <li>
        <span class="title">Car</span>
        <span class="price">$10</span>
        <span class="qty">1</span>
    </li>
</ul>

还有一点点jquery：

$(document).ready(function(){
  $('.title').css('width',getMaxNameWidth());
});

function getMaxNameWidth(){
  var maxWidth = 0;
  $('.title').each(function(i){
    if(this.offsetWidth > maxWidth)
      maxWidth = this.offsetWidth;
  });
  return maxWidth;
}

Answer 5

类似于列表的DOM是可能的：

HTML（来自Calvin Froedge）：

<ul class="productList">
    <li>
        <span class="title">Emacs Handbook</span> 
        <span class="price">$50</span> 
        <span class="qty">3</span
    </li>
</ul>

CSS：

ul.productList { display: table; }
.productList > li { display: table-row; }
.productList > li > * { display: table-cell; }

但是没有必要使用列表元素甚至跨度来区分单元格。您有表格数据，因此您应该使用表格元素 - 这在旧浏览器中不会导致css问题。当我已经在那里使用语义标签时，我只使用该解决方案，例如标签和输入列表。

使用css来对齐不同的字段而不是使用表

5 个答案: