Как я могу показать вертикальную белую границу в нижнем колонтитуле?

Мне нужно сделать вертикальную белую границу в нижнем колонтитуле около 90% ширины.Как я могу показать вертикальную белую границу в нижнем колонтитуле?

Это то, что он должен выглядеть следующим образом:

настоящее время у меня такой же, как на картинке, но без белой линии справа.

footer { 
 
    width: 100%; 
 
    background-color: #CDDE47; 
 
    padding: 10px; 
 
}

<footer> 
 
    <h2>Contact us</h2> 
 
    <p><em>You can find our physical location on:<br> 
 
       42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em> 
 
    </p> 
 

 
    <a href=""><em>+44 (2345) 345 456</em></a> 
 
    <br> 
 
    <a href=""><em>[email protected]</em></a> 
 

 
    <ul> 
 
    <li><a href=""><em>Check out our facebook page</em></a> 
 
    </li> 
 
    <li><a href=""><em>Check out our twitter feed</em></a> 
 
    </li> 
 
    </ul> 
 
</footer>

источник

2016-10-05 Niel

Это может быть достигнуто довольно легко с помощью :after pseudoelement, который не потребует изменять разметку. Дайте колонтитул position:relative, а затем использовать CSS, чтобы поместить абсолютно позиционирование бара внутри:

footer { 
 
    width: 100%; 
 
    background-color: #CDDE47; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 
footer:after { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 10px; 
 
    right: 50px; 
 
    background: white; 
 
    content: ""; 
 
}

<footer> 
 
    <h2>Contact us</h2> 
 
    <p><em>You can find our physical location on:<br> 
 
      42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em> 
 
    </p> 
 

 
    <a href=""><em>+44 (2345) 345 456</em></a> 
 
    <br> 
 
    <a href=""><em>[email protected]</em></a> 
 

 
    <ul> 
 
    <li><a href=""><em>Check out our facebook page</em></a> 
 
    </li> 
 
    <li><a href=""><em>Check out our twitter feed</em></a> 
 
    </li> 
 
    </ul> 
 
</footer>

источник

2016-10-05 14:51:49 Serlite

Дайте футер position: relative и добавьте div.verticalLine внутри него определяется как так:

.verticalLine{ 
    position: absolute; 
    top: 0; 
    right: 10%; 
    width: 30px; 
    height: 100%; 
    background: #fff; 
}

источник

2016-10-05 14:49:33

footer { 
 
    width: 100%; 
 
    background-color: #CDDE47; 
 
    padding: 10px; 
 
    position: relative;    /* 1 */ 
 
} 
 

 
footer::after { 
 
    content: "";     /* 2 */ 
 
    position: absolute;    
 
    width: 25px; 
 
    height: 100%; 
 
    background-color: white; 
 
    top: 0; 
 
    right: 10%; 
 
}

<footer> 
 
    <h2>Contact us</h2> 
 
    <p><em>You can find our physical location on:<br> 
 
     42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em> 
 
    </p> 
 
    <a href=""><em>+44 (2345) 345 456</em></a> 
 
    <br> 
 
    <a href=""><em>[email protected]</em></a> 
 
    <ul> 
 
    <li><a href=""><em>Check out our facebook page</em></a> 
 
    </li> 
 
    <li><a href=""><em>Check out our twitter feed</em></a> 
 
    </li> 
 
    </ul> 
 
</footer>

Примечания:

Установить nearest positioned ancestor for absolute positioning.
Для создания границы используйте абсолютно позиционированный псевдоэлемент.

источник

2016-10-05 14:50:36

добавьте Div в сноске

footer { 
 
    width: 100%; 
 
    background-color: #CDDE47; 
 
} 
 

 
.a1 { 
 
    width: 90%; 
 
    border-right: 10px solid #fff; 
 
    padding: 10px; 
 
}

<footer> 
 
    <div class="a1"> 
 
     <h2>Contact us</h2> 
 
     <p><em>You can find our physical location on:<br> 
 
      42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em></p> 
 

 
     <a href=""><em>+44 (2345) 345 456</em></a><br> 
 
     <a href=""><em>[email protected]</em></a> 
 

 
     <ul> 
 
      <li><a href=""><em>Check out our facebook page</em></a></li> 
 
      <li><a href=""><em>Check out our twitter feed</em></a></li> 
 
     </ul> 
 
</div> 
 
</footer>

источник

2016-10-05 14:51:31 Darango

Вы можете добавить псевдо элемент с CSS

footer { 
    width: 100%; 
    background-color: #CDDE47; 
    padding: 10px; 
    position:relative; 
} 
footer:after{ 
    content:''; 
    position:absolute; 
    right:10%; 
    width:10px; 
    top:0; 
    bottom:0; 
    background-color:#fff; 
}

Полный демо

footer { 
 
    width: 100%; 
 
    background-color: #CDDE47; 
 
    padding: 10px; 
 
    position:relative; 
 
} 
 
footer:after{ 
 
    content:''; 
 
    position:absolute; 
 
    right:10%; 
 
    width:10px; 
 
    top:0; 
 
    bottom:0; 
 
    background-color:#fff; 
 
}

<footer> 
 
    <h2>Contact us</h2> 
 
    <p><em>You can find our physical location on:<br> 
 
       42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em> 
 
    </p> 
 

 
    <a href=""><em>+44 (2345) 345 456</em></a> 
 
    <br> 
 
    <a href=""><em>[email protected]</em></a> 
 

 
    <ul> 
 
    <li><a href=""><em>Check out our facebook page</em></a> 
 
    </li> 
 
    <li><a href=""><em>Check out our twitter feed</em></a> 
 
    </li> 
 
    </ul> 
 
</footer>

источник

2016-10-05 14:51:47

Вы можете добавить внутреннюю обертку и применить границы & отступы к этому.

footer { 
 
    width: 100%; 
 
    background-color: #CDDE47; 
 
} 
 

 
.borderWrapper{ 
 
    border-right: solid 8px #fff; 
 
    width: 90%; 
 
    padding: 10px; 
 
}

<footer> 
 
<div class="borderWrapper"> 
 
    <h2>Contact us</h2> 
 
    <p><em>You can find our physical location on:<br> 
 
       42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em> 
 
    </p> 
 

 
    <a href=""><em>+44 (2345) 345 456</em></a> 
 
    <br> 
 
    <a href=""><em>[email protected]</em></a> 
 

 
    <ul> 
 
    <li><a href=""><em>Check out our facebook page</em></a> 
 
    </li> 
 
    <li><a href=""><em>Check out our twitter feed</em></a> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</footer>

источник

2016-10-05 14:51:49 Tom

возможно использовать: после псевдо элемента для создания белого делителя, и убедитесь, что сноска имеет место : relatve, чтобы содержать абсолютный элемент? например

footer { 
    width: 100%; 
    background-color: #CDDE47; 
    padding: 10px; 
    position: relative; 
} 

footer::after { 
content: ''; 
position: absolute; 
width: 30px; 
background: white; 
right: calc(10% - 15px); 
top: 0; 
height: 100%; 
}

источник

2016-10-05 15:08:29

Как я могу показать вертикальную белую границу в нижнем колонтитуле?

ответ

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