css用于在一行中显示3 div标签

Question

我想在同一行显示2个div标签和ul标签列表。现在逐个显示。（即）我想在同一行显示菜单，社交meedia和地址。

.footercolor {
    background: rgba(19, 64, 121, 1);
    background: -moz-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19, 64, 121, 1)), color-stop(55%, rgba(73, 155, 234, 1)), color-stop(100%, rgba(19, 64, 121, 1)));
    background: -webkit-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
    background: -o-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
    background: -ms-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
    background: linear-gradient(to right, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#134079', endColorstr='#134079', GradientType=1);
	height: 100px;
	padding: 50px 100px 100px;
	margin-bottom: 0px;
}
footer a{
	color: #fff;
}
footer a:hover{
	color: #aaa;
}
.address{
float:right;
}

 <footer class="footercolor">
                <div class="down">
                 menu
                </div>
                 <ul class="list-inline ">
		<li><a href=><i class="fa fa-3x fa-facebook-square"></i></a></li>
		<li><a href="#"><i class="fa fa-3x fa-instagram"></i></a></li>
		<li><a href="#"><i class="fa fa-3x fa-twitter-square"></i></a></li>
		</ul>
		<div class="address">
		      <p>address</p>
		</div>
    </footer>

Answer 1

＆＃13;

＆＃13;

body {
	margin:0;
}
.footercolor {
	background: rgba(19, 64, 121, 1);
	background: -moz-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19, 64, 121, 1)), color-stop(55%, rgba(73, 155, 234, 1)), color-stop(100%, rgba(19, 64, 121, 1)));
	background: -webkit-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
	background: -o-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
	background: -ms-linear-gradient(left, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
	background: linear-gradient(to right, rgba(19, 64, 121, 1) 0%, rgba(73, 155, 234, 1) 55%, rgba(19, 64, 121, 1) 100%);
 filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#134079', endColorstr='#134079', GradientType=1);
	height:100px;
	padding: 50px 100px 100px;
	margin-bottom: 0px;
}
footer a {
	color: #fff;
}
footer a:hover {
	color: #aaa;
}
.address {
	margin:0;
	padding:0;
	float:right;
	display:inline;
}
.address p {
	display:inline;
}
div.down {
	display:inline;
	margin:0;
	padding:0;
}
ul.list-inline {
	display:inline;
	margin:0;
	padding:0;
	margin-left:50px;
}
ul.list-inline li {
	display:inline;
	margin:0;
	padding:0;
}
ul.list-inline li a {
	display:inline;
	margin:0;
	padding:0;
	text-decoration:none;
}
footer span.copyright {
	width:100%;
	display:inline-block;
	text-align:center;
	padding:10px 0px;
}

＆＃13;

<footer class="footercolor">
  <div class="down"> menu </div>
  <ul class="list-inline">
    <li><a href=><i class="fa fa-3x fa-facebook-square">f</i></a></li>
    <li><a href="#"><i class="fa fa-3x fa-instagram">i</i></a></li>
    <li><a href="#"><i class="fa fa-3x fa-twitter-square">t</i></a></li>
  </ul>
  <div class="address">
    <p>sample</p>
    <p>demo</p>
    <p>trail</p>
    <br>
    <p>p.7868 </p>
    <p>f.7868 </p>
    <br>
    <p>info@domain.com</p>
  </div>
  <span class="copyright">@ all rights reserved</span> </footer>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请尝试以下操作： Updated Demo

CSS：

.address {
}
.down, .list-inline, .address {
    display:inline-block;   
    vertical-align:text-top;
    width:30%;
    margin-right:10px;
    background-color:#ccc;
}
ul{
    padding:0;
    margin:0;
    list-style-position: inside;
}
li{
    padding:10px;
}

Answer 3

尝试使用

display:table-cell

代表

.down, .list-inline, .address