仅使用display inline和inline-block对齐div
display inline和inline-block是CSS中用于设置元素的display属性的两个值，用于控制元素的布局和对齐方式。
- display inline：
- 概念：display inline将元素显示为内联元素，使其与其他内联元素在同一行内显示，不会独占一行。
- 分类：内联元素。
- 优势：可以与其他内联元素在同一行内显示，节省空间。
- 应用场景：适用于一些短小的元素，如文本、链接等。
- display inline-block：
- 概念：display inline-block将元素显示为内联块级元素，使其与其他内联元素在同一行内显示，但可以设置宽度、高度、边距等属性，具备块级元素的特性。
- 分类：内联块级元素。
- 优势：既可以与其他内联元素在同一行内显示，又可以设置宽度、高度等属性，具备更多的布局控制能力。
- 应用场景：适用于需要在同一行内显示，同时又需要设置宽度、高度等属性的元素。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：云服务器（https://cloud.tencent.com/product/cvm）、云数据库 MySQL（https://cloud.tencent.com/product/cdb_mysql）、云存储（https://cloud.tencent.com/product/cos）、人工智能（https://cloud.tencent.com/product/ai）、物联网（https://cloud.tencent.com/product/iot）、移动开发（https://cloud.tencent.com/product/mobile）、区块链（https://cloud.tencent.com/product/baas）等。
- 产品介绍链接地址：以上腾讯云产品的介绍链接地址可在对应产品页面中找到。
注意：本回答仅提供了display inline和inline-block的基本概念、分类、优势、应用场景以及腾讯云相关产品的推荐，具体使用时还需根据实际需求和具体情况进行选择和配置。
相关·内容
: inline-block;} display: inline-block;} display: inline-block;} display: inline-block></di
浏览 28提问于2020-10-02得票数 0
回答已采纳
我有一个问题，我不知道该怎么解决。我不知道如何正确地将顶部栏中的所有项目放入其中。还发生了一件奇怪的事情:当我将一些文本放入ID=toplogo中时，所有元素都会发生一点移动。是什么导致了这个问题?我该如何解决它？
浏览 1提问于2015-05-25得票数 1
1回答
我只是尝试在我的代码中使用css display: inline-block创建3个并排列。我将margin和padding设置为0，但是列的边缘没有接触(我用元素来可视化效果)；这就像给display: inline-block提供了一些默认的margin。如何在不使用display: inline-block -ve margin的猜测值或绝对定位的情况下对齐-ve元素的边缘。<div&g
浏览 2提问于2020-09-21得票数 1
回答已采纳
在火狐和Chrome中，div是如何对齐的，我遇到了这个问题。我需要两个宽度未定义的div在包装div中并排。这个想法是制作一个长长的滚动条，里面充满了内容。我遇到的问题是，在Firefox22.0中，div的结果是堆叠，而在Chrome28.0中，它工作得很好。以下是问题的两个截图。
铬这是火狐怪吗？这是一个可以用display或clear属性解决的问题吗？
浏览 0提问于2013-08-09得票数 1
回答已采纳
我的目标是创建3个垂直对齐的div，其中一个div具有父级高度(border-right)的垂直条。家长可以有一个固定的高度，这反过来应该使使用css垂直对齐成为可能(我知道flexbox可以解决这个问题，但我在这里确实询问了垂直对齐的行为)。>和css height: 50px;}
浏览 0提问于2015-12-07得票数 0
回答已采纳
这是我的密码：<div style="width:500px;height:300px;"> <div style="width:10%;height:40%;background:#00ffff;float:left;"></
浏览 1提问于2015-05-25得票数 2
回答已采纳
3回答
我试图对齐位于另一个div内的div。我想垂直居中位于“计划容器”内的“选项”div。float: right; width: 300px; background-color: purple;<divclass="plan-container">
<div class="options">Options<
浏览 2提问于2016-08-11得票数 0
回答已采纳
我尝试将使用"display: inline-block;“的两个div居中，但无论何时尝试，它都不起作用。如果我删除inline-block类。它会居中，但会沿着页面显示，而不是跨页面显示。/img/news.png'); height: 152px; display:inline-block;#conB
浏览 0提问于2013-08-07得票数 1
只需要它们水平对齐……<div id="detail_image_wrapper"> <img id="left_detail" src="images/LeftDetailImg.png" alt="Phone image">
<
浏览 3提问于2013-11-12得票数 0
我正在尝试使用CSS选择一个div的独生子。>Child</div>CSS： display: inline-block;小提琴：<<em
浏览 2提问于2018-09-03得票数 0
我需要垂直对齐一个内联块元素，并在Internet上遇到了一个使用line-height属性的示例。代码如下： display: block; height: 100px; content: ""; vertical-align: middle;
di
浏览 1提问于2016-05-17得票数 0
1回答
我正在使用一个div300px宽度，它包含一个必须垂直跨越的无序图标列表，以及一个按钮。HTML： <ul> <li><img src="dog.jpg"></li>
<li><imgsrc="mouse.jpg">
浏览 2提问于2015-11-21得票数 1
3回答
1.标题1{ display: inline-block;}{ display: inline-block;}
}
<e
浏览 1提问于2015-03-09得票数 1
回答已采纳
2回答
#loader{}
display:block;.lds-ring { width: 80px;}
box-sizing: border-box; animation-delay: -0.45s;
浏览 18提问于2020-11-14得票数 0
回答已采纳
在我的HTML中，我有一个div，它有三个div作为孩子。我想让第二个和第三个孩子(这是一个文本和按钮)在中间对齐。<div class='border'> <
浏览 0提问于2014-12-10得票数 2
2回答
我试着让两个div居中，左边对齐，右手对齐中间，我不明白为什么右手会这样对齐。: 50px;}
{ margin-right: 10px; display: inline-block; <div id="pageWrapper"&g
浏览 1提问于2017-05-07得票数 0
1回答
我一直在尝试让3 <div>在父母<div>的底部相互浮动。自从我使用Bootstrap col-md-3之后，浮动就自动进行了。我已经在互联网上搜索解决方案，但是我找不到任何解决问题的方法。<div class="option-list"> <p>Test1</p>&l
浏览 2提问于2015-05-20得票数 0
回答已采纳
由于社交网络按钮的容器div设置为display: inline-block，导航条设置为display: inline，所以我预计这两个元素都在同一行中，如，但没有。为什么？pull-left" href="/"> <&#
浏览 1提问于2013-08-15得票数 0
回答已采纳
3回答
向右对齐复选框
、、、
我试图对齐复选框，使其在反复出现的权利，但它不起作用。我已经试过检查元素，尝试了不同的方法，但我仍然不能让它走到正确的方向。<div class="container"> <p>Recurring:</p>
<form action="#"><input type="checkbox" id="check1&
浏览 6提问于2016-04-04得票数 0
回答已采纳
3回答
我有3个div，我想分别定位在页面的左边、中部和右侧，这样看起来就像：我试过这个：
<div id="mid panel" style="display: inline-bloc
浏览 1提问于2014-02-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
