如何让两个DIV居中，并且在同一行

horse_leo_zhcn 2015-12-12 11:43:00

如何让两个DIV居中，并且在同一行，请告诉指导一下，请将下边的css补全



<body>

<div id="top_nav">

    <div id="logo">

        <img src="images/logo.png">

    </div>

    <div id="nav">

        <a href="#">关于我们</a>  /  

        <a href="#">技术能力</a>  /  

        <a href="#">核心产品</a>  /  

        <a href="#">销售业绩</a>  /  

        <a href="#">网上订单</a>  /  

        <a href="#">联系我们</a>  /  

    </div>

</div>



</body>

CSS

#top_nav {

    background-color: #00B4CC;

    height: 80px;

    text-align: center;



}



#logo {



}



#nav {



}

...全文

2467 15 打赏收藏转发到动态举报

写回复

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

灬班班 2015-12-18

打赏
举报

回复

在外套个大的div，设置centre也可以，或padding-left来定位

aboutC 2015-12-17

打赏
举报

回复

1.div float:left 2.使用table放进去就可以啦

messi小威 2015-12-16

打赏
举报

回复

让#top_nav 这个大div居中，然后下面两个小div float:left，尺寸设计好

南猿北辙 2015-12-15

打赏
举报

回复

其实我想，这个百度应该很快的。

qq_30282575 2015-12-15

打赏
举报

回复

在这两个div外面再套一个大的div

DONTJUDGE 2015-12-15

打赏
举报

回复

#top_nav {
    background-color: #00B4CC;
    height: 80px;
    text-align: center;
       padding-left:这个地方自己试试;
}
 
#top_nav div {
    float:left;
  
  
}

刚才写错了 ⊙﹏⊙b汗

DONTJUDGE 2015-12-15

打赏
举报

回复

#top_nav {
    background-color: #00B4CC;
    height: 80px;
    text-align: center;
    
}

#top_nav div {
    float:left;
    padding-left:这个地方自己试试;
 
}

DONTJUDGE 2015-12-15

打赏
举报

回复

#top_nav {
    background-color: #00B4CC;
    height: 80px;
    text-align: center;
       padding-left:这个地方自己试试;
}
 
#top_nav div {
    float:left;
  
  
}

刚才写错了 ⊙﹏⊙b汗

走走停停的小码农 2015-12-14

打赏
举报

回复

body{0px auto} #logo{float:left} #nav{float:left} #top_nav{width:自己计算一下;height:80px;background-color:#00B4CC;text-align:center} 宽度你自己计算下你测试下

0轰隆隆0 2015-12-14

打赏
举报

回复

<body>
<div id="top_nav">
<table border="0" width="100%">
<tr>
<td>
<div id="logo">
<img src="images/logo.png">
</div>
</td>
</tr>
<tr>
<td>
<div id="nav">
<a href="#">关于我们</a>  /
<a href="#">技术能力</a>  /
<a href="#">核心产品</a>  /
<a href="#">销售业绩</a>  /
<a href="#">网上订单</a>  /
<a href="#">联系我们</a>  /
</div>
</td>
</tr>
</table>
</div>

</body>

0轰隆隆0 2015-12-14

打赏
举报

回复

<body>
<div id="top_nav">
<table border="0" border="0"="100%">
<tr>
<td>
<div id="logo">
<img src="images/logo.png">
</div>
</td>
</tr>
<tr>
<td>
<div id="nav">
<a href="#">关于我们</a>  /
<a href="#">技术能力</a>  /
<a href="#">核心产品</a>  /
<a href="#">销售业绩</a>  /
<a href="#">网上订单</a>  /
<a href="#">联系我们</a>  /
</div>
</td>
</tr>
</table>
</div>

</body>

_Neo 2015-12-14

打赏
举报

回复

两个div中加上属性float：left即可显示在一行

一步一成长 2015-12-13

打赏
举报

回复

两个要在同一行的div logo 和 nav，css中加上float:left;

走走停停的小码农 2015-12-12

打赏
举报

回复

你所说的两个div居中不知道是什么意思给画个大概的效果

horse_leo_zhcn 2015-12-12

打赏
举报

回复

引用 1 楼 qq_31307269 的回复:

你所说的两个div居中不知道是什么意思给画个大概的效果

就只这两个DIV在同一行并排居中

两个DIV同一行显示。也可以调整样式使其纵向排列。

在项目开发中，画面经常有多个DIV的内容显示在一行的要求。比如HTML你好，这是div1的第一行。你好，这是div1的第二行你好，这是div2的第一行。你好，这是div3的第一行。你好，这是div3的第二行怎么居中显示在一行呢？使用inline-block来做这个处理。.div_allinline{text-align:center;margin:0 auto;padding:0;clear:bo...

针对学员疑问“div垂直居中？”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程，课程包含两方面：1、文本垂直居中的解决方案；2、块级元素垂直居中的解决方案。

在CSS中，div属于块级元素，每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。所以默认情况下，2个div是无法显示在同一行的，必须通过样式属性去修改。解决方方法1：display:inline，将其变成行级元素，这样2个div就会排在同一行。解决方法

至于控件右边的间距,你的#gui元素的右边距为15px,所以你可以通过添加margin-right：0来纠正它.到#gui的CSS规则：#gui {position: absolute; top: 0; right: 0; margin-right:0;}至于对齐元素是否居中,我在这里将其分解：理论为了使像div这样的中心,使用CSS的方法是让子元素使用margin-right和margin-le...

81,092

社区成员

341,716

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章