鍍金池/ 問答/HTML5  UI  HTML/ flex 字換行了？

flex 字換行了？

問題一.flex 布局 ，為什么換行了 ，問題二：如何優(yōu)雅的寫出一下的布局（下面這種布局）

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>
回答
編輯回答
替身

width: 100%;改flex:1，讓線段占據剩余寬度。

2017年12月19日 00:27
編輯回答
陌璃

線段應該可以用after偽元素實現吧，寫個border做下定位就行了。

2017年12月14日 16:42
編輯回答
憶當年
  .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;
  }

偽元素全寬放在最后面，文字加一個白色的底放上面

2017年10月27日 06:53