БЛОГ НА HUSL


Подчеркивание заголовка в css

Автор вопроса: Гасан Гаджинский

Столкнулся со следующей проблемой при подчеркивании заголовков у блоков. Есть навбар, в нем блоки, в каждом блоке есть два элемента - название блока и, справа от него, кнопка развернуть, при нажатии на которую появляются дочерние элементы. Проблема в том, что линия, которая подчеркивает заголовки почему-то под разными заголовками получается разной высоты. Вот Js, который генерирует html для каждого блока навбара:

let screenItem = 
'<div class="col-md-4 col-lg-3 gs-nav-item" data-type="ScreenMenuItem" data-name="' + screen["Name"] + '">' +
    '<div class="gs-nav-link row">' +
        '<div class="col">' +
            '<p>' + screen["Header"] + '</p>' +
            '<div></div>' +
        '</div>' +
        '<div class="expand-items col-auto">' +
            '<span class="icon-stack expand-icon"></span>' +
        '</div>' +
    '</div>' +
'</div>';

Все эти элементы лежат в блоке:

<div class="gs-nav-area" style="display: block;"><div class="row gs-nav-area-body"></div></div>

Вот стили для навбара

.gs-nav-area {
position: fixed;
top: 55px;
height: 500px;
display: none;
z-index: 5000;
overflow-y: auto;
overflow-x: hidden;
background-color: #EEEEEE;
opacity: 1;
box-shadow: 0px 8px 14px rgba(149, 155, 161, 0.2), 0px 0px 2px rgba(149, 155, 161, 0.6);

.divider-mr-md {
    background-color: black;
}

.gs-nav-area-header {
    width: 100%;
    margin: 0;

    p {
        width: 100%;
        margin: 0;
    }
}

.gs-nav-area-body {
    width: 100%;
    margin-left: 0%;

    .gs-nav-item {
        color: black;
    }

    .gs-nav-item, .gs-nav-item-static {
        position: relative;
        height: 100px;
        text-align: center;
        user-select: none;

        .gs-nav-link, .gs-nav-link-short {
            height: 100%;

            > .col, .col-auto {
                align-self: center;

                > p {
                    position: relative;
                    margin: 0;
                    font-family: IBM Plex Sans;
                    font-size: 19px;
                }

                > div {
                    width: 95%;
                    height: 2px;
                    margin-left: 2.5%;
                    background-color: black;
                }
            }
        }

        .gs-nav-link-short {
            max-width: 80%;
            margin-left: 10%;
            margin-right: 10%;
        }
    }

    .gs-nav-item {
        .gs-nav-link > .col:hover, .gs-nav-link-short > .col:hover {
            > p:first-child {
                color: #008C95;
                cursor: pointer
            }

            > div {
                background-color: #008C95
            }
        }
    }

    .gs-nav-item-static {
        .gs-nav-link > .col, .gs-nav-link-short > .col {
            > p:first-child {
                color: #008C95;
                cursor: pointer
            }

            > div {
                background-color: #008C95
            }
        }
    }
}

.gs-nav-area-header, .gs-nav-area-body {
    .expand-items {
        cursor: pointer;
        width: 80px;
        height: 80px;

        > .expand-icon {
            position: absolute;
            font-size: 21px;
            top: 29.5px;
            right: 29.5px;
        }
    }

    .hide-items {
        cursor: pointer;
        width: 60px;
        height: 60px;

        > .hide-icon {
            position: absolute;
            font-size: 21px;
            top: 19.5px;
            right: 19.5px;
        }
    }

    .expand-items, .hide-items {
        cursor: pointer;

        > .expand-icon, .hide-icon {
            position: absolute;
            font-size: 21px;
        }
    }

    .expand-items:hover, .hide-items:hover {
        color: #008C95
    }
}

}

Вот как это отображается: Подчеркивание заголовков

Подскажите, пожалуйста, в чем может быть проблема


Источник

Ответы (1 шт):

Автор решения: Гасан Гаджинский

Протестить это можно, если скопировать данный код, вставить его в блокнот и открыть как html:

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<style>
.gs-navbar {
  background-color: #fff;
  height: 50px; }
  .gs-navbar .gs-nav-brand {
    margin-left: 50px;
    height: 50px;
    user-select: none; }
    .gs-navbar .gs-nav-brand h3 {
      line-height: 50px;
      margin: 0; }
  .gs-navbar .gs-nav-toggler {
    margin-left: 20px;
    width: 50px;
    text-align: center;
    cursor: pointer; }
    .gs-navbar .gs-nav-toggler .icon-menu {
      font-size: 30px;
      line-height: 50px;
      color: #008c95; }
  .gs-navbar .gs-nav-toggler-brand {
    display: none;
    user-select: none;
    width: 120px;
    text-align: center;
    cursor: pointer; }
    .gs-navbar .gs-nav-toggler-brand h4 {
      line-height: 50px;
      color: #008c95;
      margin: 0; }

.gs-nav-area {
  position: fixed;
  top: 55px;
  height: 500px;
  display: none;
  z-index: 5000;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #EEEEEE;
  opacity: 1;
  box-shadow: 0px 8px 14px rgba(149, 155, 161, 0.2), 0px 0px 2px rgba(149, 155, 161, 0.6); }
  .gs-nav-area .divider-mr-md {
    background-color: black; }
  .gs-nav-area .gs-nav-area-header {
    width: 100%;
    margin: 0; }
    .gs-nav-area .gs-nav-area-header p {
      width: 100%;
      margin: 0; }
  .gs-nav-area .gs-nav-area-body {
    width: 100%;
    margin-left: 0%; }
    .gs-nav-area .gs-nav-area-body .gs-nav-item {
      color: black; }
    .gs-nav-area .gs-nav-area-body .gs-nav-item, .gs-nav-area .gs-nav-area-body .gs-nav-item-static {
      position: relative;
      height: 100px;
      text-align: center;
      user-select: none; }
      .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link, .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link-short, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link-short {
        height: 100%; }
        .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link > .col, .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link .col-auto, .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link-short > .col, .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link-short .col-auto, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link > .col, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link .col-auto, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link-short > .col, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link-short .col-auto {
          align-self: center; }
          .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link > .col > p, .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link .col-auto > p, .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link-short > .col > p, .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link-short .col-auto > p, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link > .col > p, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link .col-auto > p, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link-short > .col > p, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link-short .col-auto > p {
            position: relative;
            margin: 0;
            font-family: IBM Plex Sans;
            font-size: 19px;
            margin-top: 5px; }
          .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link > .col > p:last-child, .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link .col-auto > p:last-child, .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link-short > .col > p:last-child, .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link-short .col-auto > p:last-child, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link > .col > p:last-child, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link .col-auto > p:last-child, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link-short > .col > p:last-child, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link-short .col-auto > p:last-child {
            width: 95%;
            height: 2px;
            margin-left: 2.5%;
            background-color: transparent; }
      .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link-short, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link-short {
        max-width: 80%;
        margin-left: 10%;
        margin-right: 10%; }
    .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link > .col:hover > p:first-child, .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link-short > .col:hover > p:first-child {
      color: #008C95;
      cursor: pointer; }
    .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link > .col:hover > p:last-child, .gs-nav-area .gs-nav-area-body .gs-nav-item .gs-nav-link-short > .col:hover > p:last-child {
      background-color: #008C95; }
    .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link > .col > p:first-child, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link-short > .col > p:first-child {
      color: #008C95;
      cursor: pointer; }
    .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link > .col > p:last-child, .gs-nav-area .gs-nav-area-body .gs-nav-item-static .gs-nav-link-short > .col > p:last-child {
      background-color: #008C95; }
  .gs-nav-area .gs-nav-area-header .expand-items, .gs-nav-area .gs-nav-area-body .expand-items {
    cursor: pointer;
    width: 80px;
    height: 80px; }
    .gs-nav-area .gs-nav-area-header .expand-items > .expand-icon, .gs-nav-area .gs-nav-area-body .expand-items > .expand-icon {
      position: absolute;
      font-size: 21px;
      top: 29.5px;
      right: 29.5px; }
  .gs-nav-area .gs-nav-area-header .hide-items, .gs-nav-area .gs-nav-area-body .hide-items {
    cursor: pointer;
    width: 60px;
    height: 60px; }
    .gs-nav-area .gs-nav-area-header .hide-items > .hide-icon, .gs-nav-area .gs-nav-area-body .hide-items > .hide-icon {
      position: absolute;
      font-size: 21px;
      top: 19.5px;
      right: 19.5px; }
  .gs-nav-area .gs-nav-area-header .expand-items, .gs-nav-area .gs-nav-area-header .hide-items, .gs-nav-area .gs-nav-area-body .expand-items, .gs-nav-area .gs-nav-area-body .hide-items {
    cursor: pointer; }
    .gs-nav-area .gs-nav-area-header .expand-items > .expand-icon, .gs-nav-area .gs-nav-area-header .expand-items .hide-icon, .gs-nav-area .gs-nav-area-header .hide-items > .expand-icon, .gs-nav-area .gs-nav-area-header .hide-items .hide-icon, .gs-nav-area .gs-nav-area-body .expand-items > .expand-icon, .gs-nav-area .gs-nav-area-body .expand-items .hide-icon, .gs-nav-area .gs-nav-area-body .hide-items > .expand-icon, .gs-nav-area .gs-nav-area-body .hide-items .hide-icon {
      position: absolute;
      font-size: 21px; }
  .gs-nav-area .gs-nav-area-header .expand-items:hover, .gs-nav-area .gs-nav-area-header .hide-items:hover, .gs-nav-area .gs-nav-area-body .expand-items:hover, .gs-nav-area .gs-nav-area-body .hide-items:hover {
    color: #008C95; }

@media all and (max-width: 1200px) {
  .gs-nav-area {
    width: 95%;
    margin-left: 2.5%; } }

@media all and (min-width: 1200px) {
  .gs-nav-area {
    width: 1200px;
    margin-left: calc((100% - 1200px) / 2);
    margin-right: calc((100% - 1200px) / 2); } }

</style>
</head>
<body>
	<div class="gs-header">
		<div class="border-bottom box-shadow mb-3">
			<div data-type="Navbar" class="gs-navbar row">
				<div class="gs-nav-brand">
					<p style="line-height: 50px" class="label-md">GSCrm</p>
				</div>
				<div class="gs-nav-toggler" data-type="NavbarToggler" collapsed="true">
					<a class="icon-menu"></a>
				</div>
				<div class="gs-nav-toggler-brand" data-type="NavbarToggler" style="display: block;" collapsed="true">
					<h4>Screens</h4>
				</div>
				<div class="gs-nav-area" style="display: block;">
					<div style="margin-top: 10px" class="row gs-nav-area-header">
						<p class="label-lg">Screens</p>
					</div>
					<div class="divider-mr-md"></div>
					<div class="row gs-nav-area-body">
						<div disabled="" class="col-md-4 col-lg-3 gs-nav-item-static" data-type="ScreenMenuItem" data-name="Home Screen">
							<div class="gs-nav-link row">
								<div class="col">
									<p>Home screen</p>
									<p></p>
								</div>
								<div class="expand-items col-auto">
									<span class="icon-stack expand-icon"></span>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-lg-3 gs-nav-item" data-type="ScreenMenuItem" data-name="Table Screen">
							<div class="gs-nav-link row">
								<div class="col">
									<p>Tables</p>
									<p></p>
								</div>
								<div class="expand-items col-auto">
									<span class="icon-stack expand-icon"></span>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-lg-3 gs-nav-item" data-type="ScreenMenuItem" data-name="Business Component Screen">
							<div class="gs-nav-link row">
								<div class="col">
									<p>Business components</p>
									<p></p>
								</div>
								<div class="expand-items col-auto">
									<span class="icon-stack expand-icon"></span>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-lg-3 gs-nav-item" data-type="ScreenMenuItem" data-name="PickList Screen">
							<div class="gs-nav-link row">
								<div class="col">
									<p>Picklists</p>
									<p></p>
								</div>
								<div class="expand-items col-auto">
									<span class="icon-stack expand-icon"></span>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-lg-3 gs-nav-item" data-type="ScreenMenuItem" data-name="Business Object Screen">
							<div class="gs-nav-link row">
								<div class="col">
									<p>Business objects</p>
									<p></p>
								</div>
								<div class="expand-items col-auto">
									<span class="icon-stack expand-icon"></span>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-lg-3 gs-nav-item" data-type="ScreenMenuItem" data-name="Link Screen">
							<div class="gs-nav-link row">
								<div class="col">
									<p>Links</p>
									<p></p>
								</div>
								<div class="expand-items col-auto">
									<span class="icon-stack expand-icon"></span>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-lg-3 gs-nav-item" data-type="ScreenMenuItem" data-name="Applet Screen">
							<div class="gs-nav-link row">
								<div class="col">
									<p>Applets</p>
									<p></p>
								</div>
								<div class="expand-items col-auto">
									<span class="icon-stack expand-icon"></span>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-lg-3 gs-nav-item" data-type="ScreenMenuItem" data-name="Physical Render Screen">
							<div class="gs-nav-link row">
								<div class="col">
									<p>Physical renders</p>
									<p></p>
								</div>
								<div class="expand-items col-auto">
									<span class="icon-stack expand-icon"></span>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-lg-3 gs-nav-item" data-type="ScreenMenuItem" data-name="Icon Screen">
						<div class="gs-nav-link row">
							<div class="col">
								<p>Icons</p>
								<p></p>
							</div>
							<div class="expand-items col-auto">
								<span class="icon-stack expand-icon"></span>
							</div>
						</div>
					</div>
						<div class="col-md-4 col-lg-3 gs-nav-item" data-type="ScreenMenuItem" data-name="Action Screen">
							<div class="gs-nav-link row">
								<div class="col">
									<p>Actions</p>
									<p></p>
								</div>
								<div class="expand-items col-auto">
									<span class="icon-stack expand-icon"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.