인라인 수평선 추가

내 페이지 중 하나에 대해 생각해보아야하는 대시 보드보기와 같은 신호등이 있습니다. 그러나 나는 수평선을 여러 번 조정할 수는 없습니다.인라인 수평선 추가

내가 원하는 것은 : 내가 무엇을위한 Want

바이올린 : https://jsfiddle.net/gunnersfan/dx19y3f4/

CSS : 당신은 :before 마법의 비트와 함께이 작업을 수행 할 수

.bubble { 
    height: 30px; 
    width: 30px; 
    color: white; 
    display: inline-block; 
    text-align: center; 
    vertical-align: center; 
    border-radius: 50%; 
    margin-right: 50px; 
    margin-left: 50px; 
    font-size: 90%; 
} 
.red-bg { 
    background: red; 
} 
.green-bg { 
    background: green; 
} 
.blue-bg { 
    background: blue; 
} 

.inline-div { 
    display: inline; 
    font-size: 75%; 
    font-family: verdana; 
    margin-left: 50px; 
    margin-right: 50px; 
}

출처

2016-10-12 gunnersfan

가능한 중복 http://stackoverflow.com/questions/25460005/css-line -with-table-cell-divs) – jcaron

질문과 관련이없는 팁 : 'line-height'를'height'와 동일하게 사용하여 서클에서 숫자의 수직 중심을 맞 춥니 다. 귀하의 경우에 이렇게 :'line-height : 30px;' – fremail

감사합니다. @fremail, 그것은 유용한 팁이었습니다. – gunnersfan

: JsFiddle

.bubbles .line { 
    position: absolute; 
    top: 50%; 
    left: 50px; 
    right: 50px; 
    border-top: 1px solid black; 
    z-index: -1; 
}

다음 CSS를, 당신의 bubblediv의 랩 사업부에 클래스를 추가 'outer-bubble' 말을 추가

출처

2016-10-12 21:26:45 debute

완벽하게 작동합니다. 감사합니다! – gunnersfan

@gunnersfan yea, 당신은 환영합니다 :) – debute

합니다. 내가 당신을 위해 이것을 만든

.outer-bubble { 
    position: relative; 
} 

.outer-bubble:before { 
    position: absolute; 
    top: 50%; 
    left: 50px; 
    height: 1px; 
    width: 290px; 
    background: black; 
    content: ''; 
    z-index: -1; 
}

Fiddle

출처

2016-10-12 21:26:15 putvande

이것은 나를 위해 완벽하게 작동합니다. 고마워요! @debute가 첫 번째이기 때문에 대답을 수락했습니다. – gunnersfan

position: relative을 .bubble에 추가하는 경우 lin 이 방식으로 전자가 :

.bubble:not(:nth-last-of-type(1)):before { 
    display: block; 
    content: ''; 
    width: 140px; 
    height: 2px; 
    position: absolute; 
    top: calc(50% - 1px); 
    left: 50%; 
    background-color: #000; 
    z-index: -1; 
}

그래서, 당신은 .bubble하지만 마지막에 각각 :before 의사 요소를 추가하고 있습니다.

이 방법의 이점은 마크 업을 추가 할 필요가 없다는 것입니다. 그리고 여기에 JsFiddle입니다.

출처

2016-10-12 21:28:07

왜 HTML 캔버스를 사용하지 않습니까? 당신이 정말로 CSS를 사용하려는 경우 하지만,이 짧은 방법 :

.shape1 { 
    height: 1px; 
    width: 104px; 
    border-bottom: 1px solid ; 
    border-right: 1px solid ; 
    margin-left: 80px; 
    margin-right: 80px; 
    margin-top: 15px; 
    position:absolute; 
} 
.shape2 { 
    height: 1px; 
    width: 104px; 
    border-bottom: 1px solid ; 
    border-right: 1px solid ; 
    margin-left: 214px; 
    margin-right: 80px; 
    margin-top: 15px; 
    position:absolute; 
} 

<body> 
    <div> 
     <div class="inline-div"> 
      Title1 
     </div> 
     <div class="inline-div"> 
      Title2 
     </div> 
     <div class="inline-div"> 
      Title3 
     </div> 

    </div> 
    <div> 
    <div class="shape1"></div> 
    <div class="shape2"></div> 
     <div class="bubble red-bg"> 
     5 
     </div> 
     <div class="bubble green-bg"> 
     66 
     </div> 

     <div class="bubble blue-bg"> 
     777 
     </div> 

    </div> 
</body>

[표 셀의 div의 사이 CSS 라인] (의

출처

2016-10-12 21:36:46

인라인 수평선 추가

답변

관련 문제