CSS ile sol ve sağdaki kenarlıklı başlık

Temel olarak, bir sonraki resim başlığını "deneyim" olarak yeniden üretmem gerekiyor:

enter image description here

Nasıl yapabilirim?

Teşekkür ederim!

0

3 cevap

Something like this probably do the job: http://jsfiddle.net/R52sq/1/

Şamandıraları yok. Yalnızca bir tane ek etiketiniz varsa, herhangi bir uzunlukta içerik (daha geniş bir tarayıcı genişliği) elde edebilirsiniz.

Sadece dezavantajı muhtemelen IE6'da çalışmadı ve muhtemelen sadece kısmen IE7'de çalışıyor (emin olmak için IE7'de test edilmeye ihtiyaç duyuyor, mevcut bilgisayarda yok).

2
katma

Div'leri kullanarak bu hile yapmalısınız:

HTML:

<div id="left"></div><div id="title">Experience</div><div id="right"></div>

CSS:

#left {
    width:40%;
    float:left;
    border-bottom:1px solid #CCC;
    height:20px;
}
#right {
    width:40%;
    float:left;
    border-bottom:1px solid #CCC;
    height:20px;
}
#title {
    width:20%;
    float:left;
    height:20px;
    text-align:center;
}
0
katma

https://jsfiddle.net/5jge1qnx/

HTML

<div class="title">
    

Title

</div>

CSS

.title {
   width:100%;
   text-align:center; 
   position: relative;
}

h1 {
   position:relative; 
   padding:10px; 
   background: #f3f5f6;
   display: inline-block;
   z-index: 1;
}

.title::after {
   content:'';
   position: absolute;
   left: 0;
   right: 0;
   top: 50%;
   height: 1px;
   background: #000;
   z-index:0;
}

Titizliğinizin arka planının genişliğine dikkat edin! Ana elemanınızın veya vücudunuzun arka planı ile aynı olmalıdır!

0
katma