Boşlukların ortasındaki yatay çizgi

Question

Boşlukların ortasında bir çizgi yapmak istiyorum. Aşağıdaki resimde, satır kırmızı kutuların ortasında olmalıdır. Ben satır yüksekliğini kullanarak, ama mümkün değil yapmaya çalışıyorum

.

HTML/CSS:

.wrap { 
 
    text-align: center; 
 
    margin: 20px; 
 
} 
 
.links { 
 
    padding: 0 10px; 
 
    border-top: 1px solid #000; 
 
    height: 1px; 
 
    line-height: 0.1em; 
 
} 
 
.dot { 
 
    width: 20px; 
 
    height: 20px; 
 
    background: red; 
 
    float: left; 
 
    margin-right: 150px; 
 
    position: relative; 
 
    top: -10px; 
 
}

<div class="wrap"> 
 
    <div class="links"> 
 
    <div class="dot"></div> 
 
    <div class="dot"></div> 
 
    <div class="dot"></div> 
 
    </div> 
 
</div>

Demo: https://jsfiddle.net/nkq468xg/

Answer 1

Senkullanabilirsiniz Burada

kod links numaralı telefondanve hat için :before sargı elemanını sargı elemanında kullanabilirsiniz.

.wrap { 
 
    text-align: center; 
 
    margin: 20px; 
 
    position: relative; 
 
} 
 
.links { 
 
    padding: 0 10px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position: relative; 
 
} 
 
.wrap:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    border-top: 1px solid black; 
 
    background: black; 
 
    width: 100%; 
 
    transform: translateY(-50%); 
 
} 
 
.dot { 
 
    width: 20px; 
 
    height: 20px; 
 
    background: red; 
 
}

<div class="wrap"> 
 
    <div class="links"> 
 
    <div class="dot"></div> 
 
    <div class="dot"></div> 
 
    <div class="dot"></div> 
 
    </div> 
 
</div>

Answer 2

Burada hat üstünde aslında bir numara, ama o HTML başka bir öğe eklemek yapar:

https://jsfiddle.net/nkq468xg/2/

.wrap { 
 
    text-align: center; 
 
    margin: 20px; 
 
} 
 

 
.links { 
 
    height: 20px; 
 
    position: relative; 
 
} 
 
hr { border: 0; 
 
height: 1px; 
 
background: black; 
 
position: absolute; 
 
top: 1px; 
 
width: 100%; 
 
} 
 
.dot { 
 
    width: 20px; 
 
    height: 20px; 
 
    background: red; 
 
    float: left; 
 
    margin-right: 150px; 
 
}

<div class="wrap"> 
 
    <div class="links"> 
 
    <hr> 
 
    <div class="dot"></div> 
 
    <div class="dot"></div> 
 
    <div class="dot"></div> 
 
    </div> 
 
    </div>

Answer 3

Sen burada SO sorunuzu Kod pasajınızı kontrol :after

.links { 
    padding: 0 10px; 
    overflow: auto; // Your div will have the height of the overflowing elements 
} 

.links::after { 
    content: ''; 
    width: 100%; 
    height: 1px; 
    background: black; 
    display: block; 
    position: relative; 
    top: 10px; 
} 

Answer 4

gibi, sözde elemanı kullanabilirsiniz ("Run kod parçacığı" mavi düğme), ne ihtiyaç vardır? .dot kodunuzda position: relative; top: -10px; eklendi.

.dot { 
    position: relative; 
    top: -10px; 
} 

Fiddle: https://jsfiddle.net/nkq468xg/3/