0

Верстаю соц.сеть. В блоке на скрине есть полоска ниже "Your page". По макету она должна быть на всю ширину блока:

введите сюда описание изображения

Пробовал сделать эту полоску в виде border, но так как задал паддинг всему блоку, то границе не на всю ширину. Решил делать через псевдоэлемент. Но то эта полоска на всю ширину страницы, то она уезжает за границы блока, то не на ширину блока.

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: #e5e5e5;
}

.fanpage {
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin-top: 16px;
  padding: 10px 16px 16px 16px;
  margin-left: 24px;
}

.fanpage-header {
  display: flex;
  justify-content: space-between;
  /* border-bottom: 1px solid black; */
}

.fanpage-item {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.fanpage-item-stats {
  margin-left: 12px;
}

.fanpage-image {
  width: 48px;
  height: 48px;
}

.fanpage-title {
  font-size: 14px;
  line-height: 22px;
  color: #595959;
  margin: 0;
  margin-bottom: 16px;
}

.fanpage-item-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #0050b3;
  display: block;
}

.fanpage-messages {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fanpage-notifications {
  display: flex;
  align-items: center;
  margin-left: 60px;
  margin-top: -7px;
  width: 100%;
  word-wrap: break-word;
  margin-bottom: 23px;
}

.fanpage-button-icon {
  margin-right: 4px;
}

.fanpage-messages-count,
.fanpage-notifications-count {
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  color: #8c8c8c;
}

.fanpage-count-icon {
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin-left: 4px;
}

.fanpage-stats {
  margin-bottom: 16px;
}

.fanpage-stats::before {
  position: absolute;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
  margin-bottom: 16px;
  display: inline-block;
}

.fanpage-buttons-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 16px;
}

.fanpage-buttons-group::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
  margin-bottom: 16px;
}

.fanpage-button-active {
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  color: #1890ff;
  background: #ffffff;
  border: 1px solid #1890ff;
  height: 40px;
}

.fanpage-button {
  background: #ffffff;
  font-weight: normal;
  border: 1px solid #d9d9d9;
  font-size: 16px;
  line-height: 24px;
  height: 40px;
}

.fanpage-button,
.fanpage-button-active {
  flex-grow: 1;
  justify-content: center;
}

.fanpage-count-active {
  font-weight: normal;
  font-size: 24px;
  line-height: 32px;
  color: #262626;
  display: flex;
  justify-content: center;
  margin: 0;
  margin-bottom: 4px;
}

.fanpage-all-active {
  font-size: 14px;
  font-weight: normal;
  line-height: 22px;
  color: #8c8c8c;
  display: flex;
  justify-content: center;
  margin: 0;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  /* visibility: hidden; */
  width: 63px;
  height: 32px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 15px;
  margin-left: -45px;
}

.tooltiptext {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #FFFFFF;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.post-header-button:hover .tooltiptext {
  visibility: visible;
}
<div class="fanpage">
  <div class="fanpage-header">
    <h4 class="fanpage-title">Your page</h4>
    <div class="funpage-dots">
      <button class="post-header-button">
        <svg width="24" height="24" class="post-button-icon">
          <use xlink:href="img/icons.svg#dots"></use>
        </svg>
        <div class="tooltip">
          <span class="tooltiptext">Options</span>
        </div>
      </button>
    </div>
  </div>
  <div class="fanpage-stats">
    <a href="#" class="fanpage-item">
      <div class="fanpage-item-image">
        <img src="/img/fanpage.jpg" alt="fanpage" class="fanpage-image">
      </div>
      <div class="fanpage-item-stats">
        <span class="fanpage-item-title">Concuria</span>
        <div class="fanpage-messages">
          <svg width="16" height="16" class="fanpage-button-icon">
            <use xlink:href="img/icons.svg#comment"></use>
          </svg>
          <span class="fanpage-messages-count">Messages</span>
        </div>
      </div>
    </a>
    <div class="fanpage-notifications">
      <svg width="16" height="16" class="fanpage-button-icon">
        <use xlink:href="img/icons.svg#bell"></use>
      </svg>
      <span class="fanpage-notifications-count">Notifications</span>
      <svg width="17" height="22" class="fanpage-count-icon">
        <use xlink:href="img/icons.svg#count-fanpage"></use>
      </svg>
    </div>
  </div>
  <div class="fanpage-buttons-group">
    <button class="fanpage-button-active">Likes</button>
    <button class="fanpage-button">Views</button>
    <button class="fanpage-button">Posts</button>
  </div>
  <div class="fanpage-likes">
    <h2 class="fanpage-count-active">262</h2>
    <h4 class="fanpage-all-active">5 likes this week</h4>
  </div>
</div>

1
  • 1
    Как вариант вы можете полоске задавать отрицательные горизонтальные маргины в размер паддингов родителя. Тогда не придётся использовать абсолют у полоски.
    – user347472
    Commented 18 янв. 2021 в 7:03

2 ответа 2

2

Мне было бы удобное сделать это следующим образом:

.elem {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #aaa;
}

.elem .title {
  display: block;
  width: 100%;
  border-bottom: 1px solid #aaa;
  padding: 10px 15px;
  box-sizing: border-box;
}

.elem .content {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: 10px 15px;
  box-sizing: border-box;
}
<div class="elem">
  <div class="title">
    Свой отступ у заголовка, бордер тоже у него
  </div>
  <div class="content">
    А у контента свой отступ
  </div>
</div>


В вашем случае "убегает" псевдоэлемент из-за наличия у него position: absolute.
Т.к. при использовании данного правила, элемент берёт размеры ближайшего родителя с position, но не position: static (именно такое правило по умолчанию у всех элементов).

По-этому в вашем случае нужно задать элементу .fanpage-stats правило position: relative;. Но тогда поведение будет таким же и описали вы:

..так как задал паддинг всему блоку, то границе не на всю ширину.


Что предлагаю

Вариант А - переверстать по типу того, что я предложил выше.

Вариант Б - использовать текущий вариант, но учитывать отступы родителя:

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: #e5e5e5;
}

.fanpage {
  background: #ffffff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin-top: 16px;
  padding: 10px 16px 16px 16px;
  margin-left: 24px;
}

.fanpage-header {
  display: flex;
  justify-content: space-between;
  /* border-bottom: 1px solid black; */
}

.fanpage-item {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.fanpage-item-stats {
  margin-left: 12px;
}

.fanpage-image {
  width: 48px;
  height: 48px;
}

.fanpage-title {
  font-size: 14px;
  line-height: 22px;
  color: #595959;
  margin: 0;
  margin-bottom: 16px;
}

.fanpage-item-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #0050b3;
  display: block;
}

.fanpage-messages {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fanpage-notifications {
  display: flex;
  align-items: center;
  margin-left: 60px;
  margin-top: -7px;
  width: 100%;
  word-wrap: break-word;
  margin-bottom: 23px;
}

.fanpage-button-icon {
  margin-right: 4px;
}

.fanpage-messages-count,
.fanpage-notifications-count {
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  color: #8c8c8c;
}

.fanpage-count-icon {
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin-left: 4px;
}

.fanpage-stats {
  margin-bottom: 16px;
  /* О чём я писал */
  position: relative;
}

.fanpage-stats::before {
  position: absolute;
  /* left: -*отступ слева*px */
  left: -16px;
  content: "";
  width: calc(100% + 32px); /* + (отступы слева + справа) */
  height: 1px;
  background-color: #e8e8e8;
  margin-bottom: 16px;
  display: inline-block;
}

.fanpage-buttons-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 16px;
}

.fanpage-buttons-group::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
  margin-bottom: 16px;
}

.fanpage-button-active {
  font-size: 16px;
  font-weight: normal;
  line-height: 24px;
  color: #1890ff;
  background: #ffffff;
  border: 1px solid #1890ff;
  height: 40px;
}

.fanpage-button {
  background: #ffffff;
  font-weight: normal;
  border: 1px solid #d9d9d9;
  font-size: 16px;
  line-height: 24px;
  height: 40px;
}

.fanpage-button,
.fanpage-button-active {
  flex-grow: 1;
  justify-content: center;
}

.fanpage-count-active {
  font-weight: normal;
  font-size: 24px;
  line-height: 32px;
  color: #262626;
  display: flex;
  justify-content: center;
  margin: 0;
  margin-bottom: 4px;
}

.fanpage-all-active {
  font-size: 14px;
  font-weight: normal;
  line-height: 22px;
  color: #8c8c8c;
  display: flex;
  justify-content: center;
  margin: 0;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  /* visibility: hidden; */
  width: 63px;
  height: 32px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 15px;
  margin-left: -45px;
}

.tooltiptext {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #FFFFFF;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.post-header-button:hover .tooltiptext {
  visibility: visible;
}
<div class="fanpage">
  <div class="fanpage-header">
    <h4 class="fanpage-title">Your page</h4>
    <div class="funpage-dots">
      <button class="post-header-button">
        <svg width="24" height="24" class="post-button-icon">
          <use xlink:href="img/icons.svg#dots"></use>
        </svg>
        <div class="tooltip">
          <span class="tooltiptext">Options</span>
        </div>
      </button>
    </div>
  </div>
  <div class="fanpage-stats">
    <a href="#" class="fanpage-item">
      <div class="fanpage-item-image">
        <img src="/img/fanpage.jpg" alt="fanpage" class="fanpage-image">
      </div>
      <div class="fanpage-item-stats">
        <span class="fanpage-item-title">Concuria</span>
        <div class="fanpage-messages">
          <svg width="16" height="16" class="fanpage-button-icon">
            <use xlink:href="img/icons.svg#comment"></use>
          </svg>
          <span class="fanpage-messages-count">Messages</span>
        </div>
      </div>
    </a>
    <div class="fanpage-notifications">
      <svg width="16" height="16" class="fanpage-button-icon">
        <use xlink:href="img/icons.svg#bell"></use>
      </svg>
      <span class="fanpage-notifications-count">Notifications</span>
      <svg width="17" height="22" class="fanpage-count-icon">
        <use xlink:href="img/icons.svg#count-fanpage"></use>
      </svg>
    </div>
  </div>
  <div class="fanpage-buttons-group">
    <button class="fanpage-button-active">Likes</button>
    <button class="fanpage-button">Views</button>
    <button class="fanpage-button">Posts</button>
  </div>
  <div class="fanpage-likes">
    <h2 class="fanpage-count-active">262</h2>
    <h4 class="fanpage-all-active">5 likes this week</h4>
  </div>
</div>

1

В чем проблема написать полоску в не padding блока. Если отлетает. поправьте тем же transform или отрицательным margin.

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.