订单文字样式

白昼的星光@

已于 2024-01-31 16:15:14 修改

阅读量449

点赞数 4

分类专栏：原生html标签文章标签：前端

于 2024-01-31 16:14:01 首次发布

本文链接：https://blog.csdn.net/weixin_44815800/article/details/135955952

版权

原生html标签专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天在看京东订单时看到以下列表感觉很有意思，这里记录一下

在这里插入图片描述
可以看到左右都是文字，左边是标题，右边是内容，我觉得他的换行很不错
然后就自己实现了下面的样式

如果左右内容都比较少就不会换行
左右内容做少有50px间距，如果右边过多就会换行
当左边内容宽度超过 375 - 100 - 50 时也会换行

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      ul,
      li {
        list-style: none;
      }
      .list {
        margin: 50px auto;
        width: 375px;
        height: 600px;
        border: 1px gray solid;
        border-radius: 10px;
      }
      .item {
        display: flex;
        justify-content: space-between;
        gap: 0 50px;

        margin: 10px;
        background-color: #e5e2e2;
      }
      .left {
        min-width: 100px;
      }
      .right {
        word-wrap: break-word;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <ul class="list">
      <li class="item">
        <div class="left">企业名称</div>
        <div class="right">xxxxxxx</div>
      </li>
      <li class="item">
        <div class="left">安全管理员</div>
        <div class="right">小张</div>
      </li>
      <li class="item">
        <div class="left">安管员联系电话（文字文字文字）</div>
        <div class="right">18237287989</div>
      </li>
      <li class="item">
        <div class="left">实际地址</div>
        <div class="right">文字文字文字文字文字文字文字文字文字文字文字文字</div>
      </li>
      <li class="item">
        <div class="left">安管员联系电话（文字文字文字）</div>
        <div class="right">18237287989</div>
      </li>
      <li class="item">
        <div class="left">实际地址</div>
        <div class="right">文字文字文字文字文字文字文字文字文字文字文字文字</div>
      </li>
    </ul>
  </body>
</html>