小盒子在大盒子里面并排问题

当两个盒子在一个大盒子里时默认是从上往下依次往下的。

盒子如下：（这是我写的）

<!-- 主导航模块 --><div class="xtx-main-nav container"><!-- logo --><h1 class="logo fl"><a href="#">小兔鲜儿</a></h1><!-- 导航 --><nav class="fl"><ul><li><a href="#">首页</a></li><li><a href="#">生鲜</a></li><li><a href="#">美食</a></li><li><a href="#">餐厨</a></li><li><a href="#">电器</a></li><li><a href="#">居家</a></li><li><a href="#">洗护</a></li><li><a href="#">孕婴</a></li><li><a href="#">服装</a></li></ul></nav><!-- 搜素 --><div class="search"></div><!-- 购物车 --><div class="cart"></div></div>

/* ----------主导航--------- */
.xtx-main-nav {height: 130px;width: 1240px;/* padding将盒子撑大 */padding-top: 30px;/* 内减 */box-sizing: border-box;margin: 0 auto;background-color:antiquewhite;
}
.xtx-main-nav .logo {width: 207px;height: 70px;/* background-color: gainsboro; */margin-left: 25px;
}
.xtx-main-nav .logo a{display:block;height: 70px;font-size: 0;background: url('./images/logo.png');background-size: 100% 100%;
}.xtx-main-nav nav li{height: 70px;float: left;list-style: none;
}

显示出来的盒子如图所示（两个盒子上下排列）：

别人写的，代码如下图：

显示的效果是我想要的，但是我写不出来

这个是我想要的效果，如下图显示（两个盒子并排）：

小盒子在大盒子里面并排问题相关推荐

经典面试题：CSS定位知识及小盒子套大盒子的方法
一.页面布局 1.1页面布局分类 css网页布局的本质:就是在网页中排列盒子(标签) css网页布局分为3种机制:普通流.浮动.定位普通流:就是从上到下,从左到右的排布浮动:本质是让块元素横向排列 ...
html一个大盒子中有三个小盒子,小班科学活动：大盒子、小盒子真有趣
活动目标: 1. 喜欢和老师.同伴一起看看.猜猜.讲讲各种有趣的盒子,乐意表达自己的想法和经验. 2. 初步感知探索盒子和盒中物品的关系,尝试用各种方法打开盒子. 活动准备: 大盒子三个.各种小盒子等 ...
【HTML+CSS】实现小盒子水平垂直居中大盒子
小div在大div中如何水平垂直居中关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: // 大盒子嵌套 ...
让子盒子在父盒子中垂直居中的七个方法
一.用padding实现 1.padding-top = (父盒子的高度 - 子盒子的高度) / 2 2.padding-left = (父盒子的宽度 - 子盒子的宽度) / 2 3.由于paddin ...
小div在大div里面水平垂直都居中的实现方法
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...
两个相邻盒子的边框怎么只显示一个_【前端小课堂】0044 盒子
这是一个面向零基础的前端教程,很简单,用零散时间就可以学习. 推荐早上读一下,晚上复习一下,如果可以奢侈一点,白天稍微练习一下下,总共花费 5~15 分钟.就酱! 已经好几次提到块(block)元素了 ...
微信小程序CSS-父盒子跟子盒子之间的缝隙问题
时间:2021-10-27 问题: 父子盒子结构中,父级盒子有border时,子盒子不能完全和父盒子边框重合,会有一个小的缝隙: 注:微信小程序真机环境下测试,父级盒子有border时出现的问题,无b ...
小动画制作图片盒子配合定时器 winform 114869633
小动画制作图片盒子配合定时器 winform 114869633 目标一让图片盒子与图片列表控件可以互动起来让图片盒子控件的图片,从图片列表控件中获取新建一个图片列表控件把相关的图片加载进 ...
flex white-space: nowrap,撑大盒子问题
flex布局,两行,一个是标题,一个是属性.想实现的功能,标题超长"......"省略号代替. 出现一个问题就是,内容过长,会撑大盒子宽度.虽然不显示,但是会影响下面一行属性的显示 ...

小盒子在大盒子里面并排问题

小盒子在大盒子里面并排问题相关推荐

最新文章

热门文章