如何把按鈕放在內線？

Question

我想要的是這樣的：

------------------- button -------------- ----

我知道如何將文本放在行內，但是當我把按鈕看起來不好。任何建議？

Answer 1

您可以嘗試添加使用after和before的行。

button { 
 
    padding: 0 100px; 
 
    overflow: hidden 
 
} 
 
button span { 
 
    display: inline-block; 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
button > span:after { 
 
    content: ''; 
 
    border-bottom: 1px dotted #000; 
 
    height: 1px; 
 
    width: 1000%; 
 
    position: absolute; 
 
    left: calc(100% + 5px); 
 
    top: calc(50% - 1px); 
 
} 
 
button > span:before { 
 
    content: ''; 
 
    border-bottom: 1px dotted #000; 
 
    height: 1px; 
 
    width: 1000%; 
 
    position: absolute; 
 
    right: calc(100% + 5px); 
 
    top: calc(50% - 1px); 
 
}

<button type="button"> 
 
    <span>Button</span> 
 
</button>