HTML / CSS：列表元素的列式布局

| 我在一个表格单元格中有一个list（），其中的元素包含一个标签（\“数据描述符\”）和一个包含数据的跨度。请参阅下面的php代码： 
...
echo \'<li><label>Trade Name</label><span>\' . $row[\'TRADE_NAME\'] . \'</span></li>\';
echo \'<li><label>Company</label><span>\' . $row[\'COMPANY\'] . \'</span></li>\';
echo \'<li><label>Synonyms</label><span>\' . $row[\'ALL_SYNONYMS\'] . \'</span></li>\';
...
现在的问题是，如果跨度中的文本太长，它将“溢出到下一行”，并直接显示在标签下方： 
Trade Name  XYZ
Company     ABC
Synonyms    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxx
我希望它看起来像这样： 
Trade Name  XYZ
Company     ABC
Synonyms    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
            xxxxxxxxxxxxxxxxx
问题在于此列表在表格单元格中。据我所知，divs不能在表格单元格中显示吗？是清单？ 我该如何解决以上问题？ 编辑： 如果值为emtpy / null，则使用dl会导致以下问题： 
Trade Name  XYZ
Company    Synonyms xxxx
-> 2 dt elemtns显示在同一行上。     
2020-03-27 4 条评论
分享

没有找到相关结果

    已邀请:

    邵酮

    在我看来，这种布局就像一张桌子，所以我要用一张桌子： 
    <table>
    <tbody>
        <tr>
            <td>Trade</td>
            <td>Name XYZ</td>
        </tr>
        <tr>
            <td>Company</td>
            <td>ABC</td>
        </tr>
        <tr>
            <td>Synonyms</td>
            <td>xxxxxx xxxxxx xxxxxx xxxxxxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxx</td>
        </tr>
    </tbody>
</table>
    但是，如果您不想使用表并且不介意手动调整大小，则可以使用定义列表进行操作： 
    <dl>
    <dt>Trade</dt><dd>Name  XYZ</dd>
    <dt>Company</dt><dd>ABC</dd>
    <dt>Synonyms</dt><dd>xxxxxx xxxxxx xxxxxx xxxxxxxx xxxxxx xxxxxxxx xxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxxx xxxxxxxxxx xxxxxxx</dd>
</dl>
    然后是一些CSS： 
    dt {
    float: left;
    width: 100px;
}
dd {
    margin-left: 100px;
}
    以及这两种方法的示例：http://jsfiddle.net/ambiguous/RftDM/     
    2020-03-27 0 0
    分享

    谷起

    一定是李的吗？为什么不在表中创建其他表单元级别？许多表都细分了单元格。 （在您的代码中，将li替换为tr并将标签和span替换为td \'s，然后将其包裹在ѭ7中。） 作为辅助解决方案，我将删除li \'s和label并使用两个范围，第一个是class = \“ floatleft \”，第二个是class = \“ floatright \”。然后只需使用td span.floatleft {display：block; float：left;}（和其他span相似）为这些类设置样式。您可能必须至少为左侧的宽度设置宽度，我认为它不需要高度。     
    2020-03-27 0 0
    分享

    很缴 

        <div class=\"container\">
    <div class=\"spacer\">
      &nbsp;
    </div>

    <div class=\"float\">
      <img src=\"image1.gif\" width=\"100\" height=\"100\"
      alt=\"image 1\" /><br />
      <p>caption 1</p>
    </div>

    <div class=\"float\">
      <img src=\"image2.gif\" width=\"100\" height=\"100\"
      alt=\"image 2\" /><br />
      <p>caption 2</p>
    </div>

    <div class=\"float\">
      <img src=\"image3.gif\" width=\"100\" height=\"100\"
      alt=\"image 3\" /><br />
      <p>caption 3</p>
    </div>

    <div class=\"spacer\">
      &nbsp;
    </div>

    </div>

div.spacer {
  clear: both;
  }
div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }

Another one

div.float {
  float: left;
  }

div.float p {
   text-align: center;
   }

And the HTML:

<div class=\"float\">
  <img src=\"image1.gif\" width=\"100\" height=\"100\"
  alt=\"image 1\" /><br />
  <p>caption 1</p>
</div>

<div class=\"float\">
  <img src=\"image2.gif\" width=\"100\" height=\"100\"
  alt=\"image 2\" /><br />
  <p>caption 2</p>
</div>

<div class=\"float\">
  <img src=\"image3.gif\" width=\"100\" height=\"100\"
  alt=\"image 3\" /><br />
  <p>caption 3</p>
</div>
        
    2020-03-27 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.037530899047852