html - 带右边框的 CSS 文本

Question

我需要帮助在段落名称、街道、邮政、电子邮件、orgnr 之间画一条垂直线。我知道我需要制作一个 border-right 并可能创建 div 以获得正确的边距。

我想在 css 上保持相同的行为，但不知道如何做。我尝试了 div，但它看起来不太好。

.footer_contact {
    background-color: #f8f8f8;
    bottom: 0;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 18px;
    line-height: 28px;
    margin-top: 79px;
}

.footer_contact p {
    font-size: 18px;
    letter-spacing: 0.050em;
    display: inline;
    font-weight: 500;
    margin-right: 35px;
}

.footer_contact ul {
	font-size: 12px;
	list-style: none;

}

.footer_contact ul li {
	float: right;
}

.footer_contact a {
	color: #3c273a;
    text-decoration: none;
    margin-right: 77px;
}

<div class="footer_contact">
    <div class="grid_medium_footer">
        <nav class="footer_icons">
            <ul class="social_icons">
                <li><a href="#" class="social_instagram">Instragram<i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                <li><a href="#" class="social_facebook">Facebook<i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                <li><a href="#" class="social_linkedin">Linkedin<i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                <li><a href="#" class="social_twitter">Twitter<i class="fa fa-twitter" aria-hidden="true"></i></a></li>
            </ul>
        </nav> 
        <p>Name</p>
        <p>Street</p>
        <p>Postal</p>
        <p>Email</p><br>
        <p>Orgnr</p>
    </div>
</div> <!-- grid_medium_footer -->

Answer 1

我对你的代码做了一些修改希望这会有所帮助

.footer_contact {
	
    background-color: #f8f8f8;
    bottom: 0;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 18px;
    line-height: 28px;
    margin-top: 79px;
}


.footer_contact p {
    font-size: 18px;
    letter-spacing: 0.050em;
    display: inline;
    font-weight: 500;
	width:100px;
	text-align: center;
}


.footer_contact ul {
	font-size: 12px;
	list-style: none;
	
}

.footer_contact ul li {
    float: left;
    border-left: 1px solid #ddd;
    text-align: center;
}
.footer_contact ul li:first-child {
    border-left: 0;
}
.footer_contact a {
    color: #3c273a;
    text-decoration: none;
    width: 120px;
    display: inline-block;
}

	<div class="footer_contact">
		<div class="grid_medium_footer">
			
			 <nav class="footer_icons">
			            <ul class="social_icons">
			              <li><a href="#" class="social_instagram">Instragram<i class="fa fa-instagram" aria-hidden="true"></i></a></li>
			              <li><a href="#" class="social_facebook">Facebook<i class="fa fa-facebook" aria-hidden="true"></i></a></li>
			              <li><a href="#" class="social_linkedin">Linkedin<i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
			              <li><a href="#" class="social_twitter">Twitter<i class="fa fa-twitter" aria-hidden="true"></i></a></li>
			            </ul>
	     			</nav> 
	     <div>       			
		 
	     <p>Name</p>
	     <p>Street</p>
	     <p>Postal</p>
	     <p>Email</p><br>
	     <p>Orgnr</p>
	   </div>
	   </div>   
			
		
	</div> <!-- grid_medium_footer -->