Question

我是学生，对此非常陌生。

我试图将文本（footer_contact_text）与页脚图标（social_icons）放在同一行。尝试使用块内显示和浮动显示，但按我的方式无法正常工作。

试图找出问题所在，但我被卡住了。

很抱歉，有很多代码:)希望您能理解。

/* Footer */

.grid_medium_footer{

	margin: 0 auto;
    margin-left: 40px;
    margin-right: 40px;
}


.footer_contact {
	
    background-color: #f8f8f8;
    bottom: 0;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 18px;
    line-height: 28px;
}


.footer_contact table {
	border: none;
}


.footer_contact th, td  {
	border: none;
	line-height: 16px;

}

ul.footer_contact_text{
	margin:0;
	list-style: none;
}

ul.footer_contact_text li{
	display: inline-block;
	padding-right: 20px;
	border-right: 2px solid #cdcdcd;
	line-height: 15px;

}

ul.footer_contact_text li:last-child{
	border-style: none;
	border-bottom: solid 1px #04fbc7;
	margin-right: 0px;
}

	
.footer_contact .social_icons {
	float:right;
	
}

.footer_contact ul.social_icons li {
	float: left;
	list-style: none;
	margin-right: 38px;
     	
}
.footer_contact ul.social_icons li a{
	text-indent: -99999px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: 35px;
    height: 35px;;
    background-position: -16px -729px;
}
.footer_contact ul.social_icons li a.social_facebook{
    background-position: -65px -785px;
    width: 16px;
    height: 16px;
}
.footer_contact ul.social_icons li a.social_twitter{
	background-position: -167px -785px;
    width: 16px;
    height: 16px;
}
.footer_contact ul.social_icons li a.social_linkedin{
	background-position: -117px -785px;
    width: 16px;
    height: 16px;
}

.footer_contact ul.social_icons li a.social_instagram{
	background-position: -17px -785px;
    width: 16px;
    height: 16px;
}


.footer_contact a {
	color: #3c273a;
    text-decoration: none;
}

<div class="footer_contact">
		<div class="grid_medium_footer">
			
	 <div class="footer_icons">
		 
			         
		        <ul class="social_icons">
	              <li><a href="#" class="social_instagram     bgimgsprite">Instragram</a></li>
	              <li><a href="#" class="social_facebook bgimgsprite">Facebook</a></li>
	              <li><a href="#" class="social_linkedin bgimgsprite">Linkedin</a></li>
	              <li><a href="#" class="social_twitter bgimgsprite">Twitter</a></li>
	            </ul>
	    </div>   
	    <div class="fixfloat"></div> 
	    
	    
		<!--  Kontakt uppgifter statiska -->
	     <ul class="footer_contact_text">    
		 <li><?php echo (get_option('namn')); ?></li>
		  <li><?php echo (get_option('gata')); ?></li>
		 <li><?php echo (get_option('postnr')); ?></li>
		 <li><?php echo (get_option('epost')); ?></li>
	     </ul><br>
	     
	     <table>		
		<tr>  
		   <th><?php echo (get_option('orgnr')); ?></th>
		 </tr>
		 <tr> 
	     </table>
	    
	     
	  </div> <!-- grid_medium_footer --> 
 </div>   <!--footer_contact -->

Answer 1

让一个父母<div>并在其中放入另外两个<div>。像这样：

<div>
    <div style="width:50%;float:left;">
    Texts here...
  </div>

  <div style="width:50%;float:right;">
    Icons here...
 </div>
</div>

Answer 2

由于图像是嵌入式元素，因此可以将其vertical-align属性设置为middle-这样，它们将在文本旁边垂直对齐。这是一个简单的示例：

<div class="social">
  <ul>
    <li><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/facebook_circle-512.png" width="24" height="24" /> Facebook
    </li>
    <li><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/facebook_circle-512.png" width="24" height="24" /> Facebook
    </li>
  </ul>
</div>

<style type="text/css">
ul {
  list-style-type:none;
  display:inline-block;
}

img {
  width:24px;
  height:24px;
  vertical-align:middle;
}

li {
  display:inline-block;
}

</style>

您可以在CodePen here

上看到它

页脚内联文本的社交图标

2 个答案: