С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
updaite
14 / 14 / 8
Регистрация: 14.01.2013
Сообщений: 544
Записей в блоге: 2
Завершенные тесты: 5
1

Длина рамки border-right для div

02.10.2016, 03:50. Просмотров 805. Ответов 4
Метки нет (Все метки)

Здравствуйте, есть div, стиль у дива такой
CSS
1
2
width: 250px; 
float: left;
Хочу сделать рамку на правый край, только чтобы она отступала от верхний и нижней границы на n пикселей.
То есть, не касалась углов блока, а отступала от них скажем на 5px;

Подскажите, как сделать такое средством css2?
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
02.10.2016, 03:50
Ответы с готовыми решениями:

высота border для div
Доброго времени суток. Возможно ли задать высоту бордера в div, тоесть сделать...

Как сделать border-collapse для div блоков?
Здравствуйте. Имею такую простую конструкци. <div class="right"></div><div...

Настройка рамки border
Здравствуйте. Есть таблица, в которой выводятся по 4 изображения в строке. Для...

Родительский div выходит за рамки дочернего DIV
Доброго времени суток. Есть три объекта DIV (назовём #a, #b, #c), они...

Как используя border-spacing оставить только внутренние рамки
Есть главный контейнер внутри которого три элемента div со свойством display:...

4
Takitsukerarete
15 / 15 / 13
Регистрация: 25.12.2015
Сообщений: 55
02.10.2016, 04:55 2
Как насчёт использования padding? Т.е. формально вы сделаете отступ до внутреннего содержимого, если не хотите растяжение блока от padding получить - пропишите box-sizing:border-box;
Крч, как-то так:
CSS
1
2
box-sizing:border-box;
padding-right:5px;
1
boilzzz
Богатый духовно
453 / 260 / 145
Регистрация: 10.03.2015
Сообщений: 1,045
Завершенные тесты: 2
02.10.2016, 16:07 3
updaite, песочница
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div{
  width:20px;
  float:left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding:5px 0 5px 0;
  border-right:1px solid gray;
}
.bg{
  width:100%;
  height:50px;
  background: blue;
  
}
HTML5
1
<div><div class="bg"></div></div>
1
updaite
14 / 14 / 8
Регистрация: 14.01.2013
Сообщений: 544
Записей в блоге: 2
Завершенные тесты: 5
02.10.2016, 18:43  [ТС] 4
Не один из вариантов мне не подошёл, мне нужно сделать вот так как на картинке.


HTML5
1
2
3
4
5
6
7
<div class = "main_sub_menu div_hor">
    <ul>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
    </ul>
</div>
CSS
1
2
3
4
.main_sub_menu{
    width: 250px;
    border-right: 1px solid red;
}
Нужно сделать отступ бордера от краев в 5 px. Я в верстке плохо понимаю, ваши варианты я подставил, они не работают.
0
Миниатюры
Длина рамки border-right для div  
Furry Cat
0 / 0 / 0
Регистрация: 24.07.2016
Сообщений: 12
02.10.2016, 19:04 5
Может вместо бордера тень попробовать?
CSS
1
2
3
4
element{
  widht:200px;
  box-shadow:12px 0 0 -10px #aaaaaa;
}
-10px уменьшит тень на 10 пикселей по сравнению с самим блоком
12px обеспечит сдвиг на 2 пикселя вправо
0
02.10.2016, 19:04
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
02.10.2016, 19:04

длина border
Здравствуйте. Есть блок &lt;div&gt;123&lt;/div&gt; c определёнными размерами.Ему присвоена...

Рамки на div
Можно-ли блоки div окаймить рамкой?

Текст переносится вместе с border-ом от div-а
Почему-то текст переносится вместе с рамкой от div'а, когда мне хотелось бы...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru