Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
lipton_v
1 / 1 / 1
Регистрация: 20.03.2017
Сообщений: 113
1

Рамка дочернего элемента располагается внутри родительского

13.03.2018, 19:55. Просмотров 257. Ответов 5
Метки нет (Все метки)

Доброго времени суток. Необходимо расположить дочерние элементы на всю высоту родителя. Но сделать это не получается. Рамки дочерних элементов располагаются внутри родительских, а не перекрывают родительскую рамку. Как исправить?
HTML5
1
2
3
4
5
<nav id="menu">
   <ul class="left">
       <li><a href="/">Главная</a></li>
   </ul>
</nav>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
nav#menu{  
    height: 4em;
    margin-top: 1.5vh;
    background-color: white;
    border: 1px solid red;
    position: relative;
}
 
nav#menu ul.left{
    top: 0;
    left: 0;
    list-style-type: none;
    height: 100%;
    border: 1px solid plum;
    position: relative;
}
 
nav#menu ul.left > li
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    border: 1px solid green;
}
0
Миниатюры
Рамка дочернего элемента располагается внутри родительского  
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.03.2018, 19:55
Ответы с готовыми решениями:

Размещение дочернего блока внутри родительского
Как заключить данный блок (смотрите код ниже) во внешний блок, чтобы получилось примерно вот так: ...

Ширина дочернего элемента больше родительского
Реализовывал &quot;прогрессбар&quot; путём увеличивающего ширину прямоугольника одного цвета на фоне другого...

Независимое поведение дочернего элемента от родительского блока
Добрый день ув. пользователи! Скажите пожалуйста, в css если допустим у блока будет ширина 1000px,...

Внутри родительского блока сделать отступ дочернего блока сверху автоматически
Здравствуйте, как с помощью css внутри родительского блока сделать отступ дочернего блока сверху...

Cмещение дочернего блока за пределы родительского при наличии overflow
Вобщем вот вся проблема: мне нужно скрыть все элементы, выходящие за рамки по Y, но при этом нужно...

5
AlexZaw
683 / 651 / 294
Регистрация: 07.08.2016
Сообщений: 2,083
Завершенные тесты: 2
13.03.2018, 20:56 2
CSS
1
2
3
ul{
  margin:0;
}
0
lastDaos
4 / 4 / 0
Регистрация: 11.03.2018
Сообщений: 19
13.03.2018, 21:01 3
исправь и добавь соответственно
CSS
1
2
3
4
5
6
7
nav#menu ul.left{
    top: -1px;
}
 
nav#menu ul.left > li
    padding-bottom: 2px;
}
По идее должно работать
0
lipton_v
1 / 1 / 1
Регистрация: 20.03.2017
Сообщений: 113
13.03.2018, 21:32  [ТС] 4
Уже есть такой кусок кода. Но это не спасает.
CSS
1
2
3
4
*{
    padding: 0;
    margin: 0;
}
Добавлено через 7 минут
Так получается что значения просто подгоняются. И если изменится толщина рамки - необходимо вносить изменения в нескольких местах, что неудобно. Есть ли более общий универсальный способ?
0
lastDaos
4 / 4 / 0
Регистрация: 11.03.2018
Сообщений: 19
13.03.2018, 21:37 5
Ну можно js использовать но это уже совсем не кашерно. А так, да - подгонять постоянно.
1
lastDaos
4 / 4 / 0
Регистрация: 11.03.2018
Сообщений: 19
16.03.2018, 15:56 6
я не совсем уверен, но ещё в голову пришло поиграть с box-sizing
0
16.03.2018, 15:56
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.03.2018, 15:56

HTML верстка: Перенос нижнего дочернего блока если превышение высоты родительского
Есть родительский блок заданной высоты (ширина -100%), в нем вертикально один под другим...

Позиционирование 2-х слоёв внутри 1-го родительского
Доброго времени суток! Помогите, пожалуйста. Такая проблема: необходимо родительский слой сделать...

Рамка вокруг текста внутри ячейки таблицы
Здравствуйте. Мне нужно задать тексту в ячейке таблицы рамку. &lt;table&gt;&lt;/tr&gt;&lt;td&gt; Text...


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

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

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