右侧有边框的 CSS 文本

Question

我需要帮助在段落名称、街道、邮政、电子邮件、组织之间画一条垂直线。我知道我需要做一个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 -->

Answer 2

你的意思是这样吗？否则，请更具体。

.footer_contact p {
font-size: 18px;
letter-spacing: 0.050em;
display: inline;
font-weight: 500;
margin-right: 2%;
padding-right: 2%;
border-right: 1px solid #dddddd;
}

Answer 3

.footer_contact p{
display:inline;
padding: 0 2%;
line-height: 2em;
border-right: 1px solid gray;
font-size: 18px;
font-weight: 500;
margin-right: 5px;
letter-spacing: 0.050em;
}