CSS: Установить границы с полуширина

Рассмотрим следующее:CSS: Установить границы с полуширина

<div class="box"> 
... 
</div> 

.box{ 
    width:500px; 
    border-bottom: 1px solid #ccc; 
}

Он будет устанавливать нижнюю границу полной ширины окна (500px). Но вместо того, чтобы границы дна на всю ширину, я хотел бы установить 300px, в середине коробки вниз, как я должен это сделать ..

источник

2012-01-10 user1117313

вы можете поставить в центре ''

в нижней части коробки? Тогда вы можете точно его настроить, как вам это нужно. –

На самом деле для этого является дополнение. – noob

@micha, который также будет помещать содержимое в поле «0» –

Вы можете нарисовать <hr> в нижней части окна?

<div class="box"> 
    ... 
    <hr> 
</div> 

.box{ 
    width:500px; 
} 

.box hr{ 
    width: 300px; 
    border-bottom: 1px solid #ccc; 
}

http://jsfiddle.net/MuAKF/

источник

2012-01-10 18:07:57

Вы можете сделать это:

.box { 
 
     position: relative; 
 
     width: 500px; 
 
    } 
 
    .border { 
 
     position: aboslute; 
 
     background: #ccc; 
 
     left: 100px; 
 
     bottom: 0; 
 
     width: 300px; 
 
     height: 1px; 
 
    }

<div class="box"> 
 
     <div class="border"> 
 
     
 
     </div> 
 
    </div>

Но есть бесконечные возможности. Некоторые из них более семантически правильны, чем другие; это решение просто быстрое решение.

источник

2012-01-10 18:05:55 wanovak

Вы можете использовать фоновое изображение:

.box{ 
    width:500px; 
    border-bottom: 1px solid #ccc; 
    background-image:(yourimage.png); /*make your image a solid line 1px tall by 250px wide (or so)*/ 
    background-position: bottom left; 
    background-repeat:no-repeat; 
}

источник

2012-01-10 18:08:02

Да! Также вы можете использовать CSS Gradients для генерации изображения в CSS, если это простой градиент или сплошной цвет: 'background-image: linear-gradient (черный, черный); размер фона: 50% 1px; background-position: 50% 100% '. –

Я предложил бы делать что-то вроде этого, хорошо работает в Firefox

<style type="text/css"> 

.box{ 

    width: 500px; 

    height: 20px; 

} 

.boxHalfWidth{ 

    width: 250px; 

    height: 1px; 

    border-bottom: 1px solid #CCC; 

} 

</style> 

</head> 

<body> 

<div class="box"> 

some data 

<div class="boxHalfWidth"></div> 

</div> 

</body>

источник

2012-01-10 18:10:53 redDevil

Ненужное использование дополнительных HTML-элементов. –

Вы можете использовать :: после или :: перед псевдоселекторами. как:

<div> something here </div>

CSS:

div { 
    width: 500px; 
    height: 100px; 
    position: relative; 
    padding-top: 20px; 
    margin-top: 50px; 
} 

div::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    width: 50%; 
    left: 25%; 
    border-top: 1px solid red; 
}

Вот это jsfiddle

источник

2014-06-04 08:05:33

Это ответ –

Вы можете использовать это решение для вертикальной границы. – titusfx

вот проблема, могу ли я использовать ** контент ** в любом случае, чтобы нарисовать границу? без использования ** граница ** свойство? просто интересуюсь – Joey

CSS: Установить границы с полуширина

ответ

Смежные вопросы