：在標籤之後展開以填充div的剩餘寬度

我有一個帶有：after標籤的h1元素，需要動態擴展以填充包含div的剩餘寬度。基本上它需要有一個寬度calc（h1_width - 100％），其中h1寬度未設置或硬編碼。這可以通過SASS完成，還是需要使用JS選項來操作DOM？ JSfiddle。：在標籤之後展開以填充div的剩餘寬度

HTML

<div class="text-box__wrap"> 
    <h1>Hello</h1> 
</div>

CSS

.text-box__wrap { 
    width: 100%; 
    margin-top: 2em auto 0; 
    padding: 0 20px; 
    } 

    .text-box__wrap h1 { 
    margin-bottom: 4%; 
    letter-spacing: 1.5px; 
    text-transform: uppercase; 
    font-size: 12px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    &:after { 
     display: inline-block; 
     /* Needs to be dynamic based on difference of h1 width and remaining div width */ 
     width: 50px; 
     height: 1px; 
     margin-left: 10px; 
     content: ""; 
     vertical-align: 30%; 
     background-color: black; 
    } 
    }

來源

2017-03-22 terra823

您可以使用display:flex在h1使:after採取的剩餘空間：

.text-box__wrap { 
 
    width: 100%; 
 
    margin-top: 2em auto 0; 
 
    padding: 0 20px; 
 
    box-sizing: border-box; 
 
} 
 

 
.text-box__wrap h1 { 
 
    letter-spacing: 1.5px; 
 
    text-transform: uppercase; 
 
    font-size: 12px; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.text-box__wrap h1:after { 
 
    display: inline-block; 
 
    height: 1px; 
 
    flex: 1 1 auto; 
 
    margin-left: 10px; 
 
    content: ""; 
 
    background-color: black; 
 
}

<div class="text-box__wrap"> 
 
    <h1>Hello</h1> 
 
</div>

來源

2017-03-22 15:58:46 DaniP

：在標籤之後展開以填充div的剩餘寬度

回答

相關問題