div标签对齐的css样式

Question

我想在同一行显示2个div标签和ul列表。现在逐个查看。 现在我的标签看起来像

但我想作为我的绘制布局。我的css和html如下所示。

m是逐个列出的菜单。但a，s，a在同一行

.address {
	margin:0;
	padding:0;
	float:right;
	display:inline;
}
.address p{
  line-height: 100%;
  color: #fff;
}
div.down  {
	display:inline;
	margin-left:0;
	padding:0;
	text-decoration:none;
}
.list-inline1 ul{
 list-style-type: none;
}
ul.list-inline {
	display:inline;
	margin:0;
	padding:0;
	margin-left:50px;
}
ul.list-inline li {
	display:inline;
	margin:0;
	padding:10px;
}
ul.list-inline li a {
	display:inline;
	margin:0;
	padding:0;
	text-decoration:none;
}

<footer class="footercolor">
         <div class="down">
                  
                    <ul  class="list-inline1 ">
                        <li class="active">
                            <a href="product.php"><b>Product</b></a> <!--product -->
                        </li>
                        <li>
                            <a href="contact.php"><b>Contact Us</b></a>
                        </li>
                        <li>
                            <a href="login.php"><b>Login</b></a>
                        </li>
                    </ul>
                
                </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>sample<br>trail<br>demo1<br>address</p>
		</div>
    </footer>

Answer 1

将宽度添加到浮动容器中。另外，我为了元素的造型而取下了边缘的清洁度。我如何将容器的宽度增加30％是通过将列数除以100％来实现的。然后你就会想到你在元素上添加了边距和填充。

<强> JSFIDDLE DEMO

---

UPDATED JSFIDDLE without bullets

---

.address {
    margin:0;
    padding:0;
    float:right;
    display:inline;
    width: 30%;
}
.address p {
    line-height: 100%;
    color: #000;
}
div.down {
    display:inline;
    margin-left:0;
    padding:0;
    text-decoration:none;
    width: 30%;
    float: left;
}
.list-inline1 ul {
    list-style-type: none;
}
ul.list-inline {
    display:inline;
    margin:0;
    padding:0;
    width: 30%;
    float: left;
}
ul.list-inline li {
    display:inline;
    margin:0;
    padding:5px;
    width: 25%;
    float: left;
    text-align: center;
}
ul.list-inline li a {
    display:inline;
    margin:0;
    padding:0;
    text-decoration:none;
}

Answer 2

请检查每个

的链接添加列类

.column{
  float:left;
  width:33.33%;


}
.footercolor{
  width:100%;
  position:relative;
}

http://jsbin.com/xecigodeje/1/edit?html,output

Answer 3

你的元素应该有一个width属性，否则它们占用100％，因为它们实际上是块元素。

同时尝试将'display'设置为'inline-block'

.adress, div.down, ul.list-inline {
  display:inline-block;
  width: 30%
}
.address {
    margin:0;
    padding:0;
    float:right;
}
.address p{
  line-height: 100%;
  color: #fff;
}
div.down  {
    margin-left:0;
    padding:0;
    text-decoration:none;
}
.list-inline1 ul{
 list-style-type: none;
}
ul.list-inline {
  margin:0;
    padding:0;
    margin-left:50px;
}
ul.list-inline li {
    display:inline;
    margin:0;
    padding:10px;
}
ul.list-inline li a {
    display:inline;
    margin:0;
    padding:0;
    text-decoration:none;
}

Answer 4

只需制作结构。将元素放在div中，使用class =“column”（例如）并添加css：

.column {position: relative; float: left; margin-right: 20px;}

Answer 5

尝试添加float：left;和保证金权利：10px

ul.list-inline li {
display:inline;
margin-right:10px;
list-style:none;
padding:10px;
float:left;
}