Сол және оң жақ шекарасы бар CSS тақырыбымен тақырып

Мен негізінен келесі сурет тақырыбын, «тәжірибе» жасай алуым керек:

enter image description here

Мұны қалай істей аламын?

Рақмет сізге!

0

3 жауаптар

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

Қалқымалы заттар жоқ. Бір ғана қосымша тегтің болуы, кез-келген ұзындықты (браузер енінен үлкенірек) болуы мүмкін.

Тек қана жетіспеушілігі, IE6-де жұмыс істемеген шығар, мүмкін, IE7-де ішінара жұмыс істейді (IE7 тестілеуі қажет, қазіргі компьютерде жоқ).

2
қосылды

Divs пайдалану, бұл алдау керек:

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
қосылды

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;
}

Ені сіздің ателеңіздің фонына мұқият болыңыз! Бұл сіздің ата-анаңыздың немесе денеңіздің фоны сияқты болуы керек!

0
қосылды