问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

flex 字换行了？

头像
blueTree
    48611

    问题一.flex 布局 ，为什么换行了 ，问题二：如何优雅的写出一下的布局（下面这种布局）

    ps: 左边是一串字，右边是 一个类似线段。左边字是没有固定宽度的

    clipboard.png

    上图是ui。下图是html

    clipboard.png

    <!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        

        .itemHeader{
            display: flex;
            align-items:baseline;
        }
        .itemHeader div:first-child{
            /*display: inline-block;*/
            margin-right: 2em;
           
        }
        .itemHeader div:last-child{
            border-bottom:1px solid #000;
            /*display: inline-block;*/
            width: 100%;
        }
    </style>
</head>

<body>

    <div class="itemHeader"><div>建筑图纸</div><div></div></div>
</body>

</html>
    flexcsscss3布局
    阅读 6.7k
    3 个回答
    得票最新
    头像
    joy钰
      9.1k53031
      ✓ 已被采纳

      width: 100%;改flex:1，让线段占据剩余宽度。

      头像
      某熊猫桑
        16.1k61547

        线段应该可以用after伪元素实现吧，写个border做下定位就行了。

        头像
        chatgpt
          4.2k11043
            .itemHeader {
    position: relative;
  }

  .itemHeader div {
    display: inline-block;
    padding-right: 2em;
    background: #fff;
  }

  .itemHeader div::before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    height: 1px;
    width: 100%;
    border-bottom: 1px solid #000;
    z-index: -1;
  }

          伪元素全宽放在最后面，文字加一个白色的底放上面

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题