水平價格菜單

Question

我的目標是在物品和價格之間創建一個水平價格菜單，我希望它能夠做出反應並且看起來不錯。我正在尋找這樣做的HTML/CSS，我可以硬編碼，但它不會如此響應。

Item ---------------- $180 

Answer 1

用短劃線模式設置背景，水平重複。然後把價格放在裏面：float：right;和堅實的背景。爲您的項目名稱也使用堅實的背景。

<div style="background:#FFF url(dash.png) repeat-x center center;"> 
    <span style="background-color:#FFF; float:right;">$15</span> 
    <span style="background-color:#FFF;">Item<span> 
</div> 

Answer 2

你還沒有提供HTML或現有的CSS，但這可以通過浮動和僞元素來實現。

.list { 
 
    min-width: 15em; 
 
} 
 
.first { 
 
    float: left; 
 
    margin-right: 0.5em; 
 
    color: #2B91AF 
 
} 
 
.price { 
 
    float: right; 
 
    margin-left: 0.5em; 
 
    width: 4em; 
 
    text-align: right; 
 
} 
 
.list:after { 
 
    content: ''; 
 
    border-bottom: dotted 2px tomato; 
 
    display: block; 
 
    overflow: hidden; 
 
    height: 0.8em; 
 
}

<p class="list"> 
 
    <i class='first'>Co-Pay:</i> 
 
    <i class="price">$150.00</i> 
 
</p> 
 
<p class="list"> 
 
    <i class='first'>Pay:</i> 
 
    <i class="price"> $5.00</i> 
 
</p> 
 
<p class="list"> 
 
    <i class='first'>Co-Pay: item</i> 
 
    <i class="price"> $15.00</i> 
 
</p> 
 
<p class="list"> 
 
    <i class='first'>Co-Pay: great deal</i> 
 
    <i class="price"> $1.00</i> 
 
</p>