为什么当我使用display: inline-block；时，div的顺序会改变？
当使用display: inline-block;时，div的顺序会改变是因为inline-block元素会按照其在HTML文档中出现的顺序进行排列，而不是按照其在CSS中的顺序。这意味着如果HTML文档中的div元素的顺序与CSS中的顺序不一致，那么它们在页面上的显示顺序也会不一致。
这种行为是由于inline-block元素的特性所导致的。inline-block元素既具有块级元素的特性，又具有行内元素的特性。它会在一行内显示，并且可以设置宽度、高度、边距等属性。但是，与块级元素不同的是，inline-block元素之间会有默认的空白间隔，这个空白间隔会导致元素在页面上的位置发生变化。
为了解决这个问题，可以使用以下方法之一：
- 在HTML文档中按照需要的顺序排列div元素，保持与CSS中的顺序一致。
- 使用浮动（float）属性来控制div元素的位置，而不使用inline-block。
- 使用flexbox布局或者grid布局来控制元素的位置和排列顺序。
总结起来，当使用display: inline-block;时，div的顺序会改变是因为inline-block元素按照HTML文档中的顺序进行排列，并且之间会有默认的空白间隔。为了避免这个问题，可以使用其他布局方式来控制元素的位置和排列顺序。
相关·内容
5回答
当我的浏览器宽度大于300 my时，我的<div id="div1">就会被display: none所隐藏。但是，如果浏览器屏幕的宽度小于300 it，则应该使用display: inline-block显示。
为什么在调整浏览器的宽度小于300 up后，我的<div id="div1">没有在屏幕上显示：
@media screen and (max-width: 300px){
#div1 { display: inline-block;}
}
#div1 { display: none; }
<!--My HTML
浏览 0提问于2018-11-22得票数 2
回答已采纳
2回答
为什么div显示属性inline-block将段落移动到左，该段落由margin:0 auto居中，没有显示属性。
.content
{
padding: 20px;
margin: 0 auto;
display: inline-block;
width: 900px;
height: 2000px;
}
content是div的类id，其中包含一些段落。当我添加display: inline-block时，段落移动到左侧。为什么会这样呢？
浏览 2提问于2016-06-08得票数 2
回答已采纳
1回答
目前，当代码运行时，两个“我的标题”字段都出现在同一个表的上方。它还将除第一个字母外的所有字母都小写。我想在每张桌子上方都有一个标题。主代码如下所示：
<%= form_for(@test) do |f| %>
<div id="field">
<%= f.label "test" %>
<%= f.text_field :test_title %><br>
</div>
<div id="field">
&
浏览 0提问于2015-07-09得票数 0
1回答
当我设置父级的z索引属性时，重叠不起作用。下面是html和css：
.black_gradient{
width:100%;
height:100%;
background: linear-gradient(0deg,rgb(75, 75, 75) 20%, rgba(75,75,75,0.8) 70%, rgba(75,75,75,0.3));
position:relative;
display:block;
z-index:3;
}
.img_container{
width: 100%;
height: 100%;
margin: 0 auto;
浏览 4提问于2015-12-27得票数 0
回答已采纳
为什么当我点击div时，类周围的颜色没有改变？另外，我怎样才能更改onclick？
var round = document.querySelector(".round");
round.addEventListener("click", function() {
round.style.backroundColor = "blue";
});
.round {
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display:
浏览 0提问于2018-11-09得票数 0
6回答
当我对div使用display = inline-block时，这两个框之间有一个间隙。谁能告诉我为什么是这样的，我怎样才能消除这个差距？
* {
margin: 0;
padding: 0;
}
.first {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
.second {
height: 100px;
width: 100px;
border: solid 1px black;
display: inline-block;
}
&l
浏览 0提问于2016-07-28得票数 2
2回答
我不明白为什么添加一个文本，为什么div会改变浏览器解析div的方式？看起来页边距顶部被改变了，尽管它没有改变。
HTML
<div id="nav">
<div class="nav-left">left</div>
<div class="nav-logo"></div>
<div class="nav-right">right</div>
</div>
CSS
#nav {
width: 400px;
浏览 2提问于2014-05-05得票数 5
2回答
我有一个具有以下html结构的页面布局：
<div class="row">
<div class="col3">test 1</div>
<div class="col3">test 2</div>
<div class="col3">test 3</div>
</div>
使用以下css，我想做一个简单、响应性好的布局：
.row {
width: 100%;
display: block;
浏览 2提问于2015-01-15得票数 1
回答已采纳
我有这部分样式，一个相对内联块元素，其中包含一个绝对元素：
<div style="display:inline-block;position: relative">
<div style="position:absolute">
<input type="text" />
<input type="button" value="submit" />
</div>
</div>
在CSS下拉菜单中也可以看到，这种情况也不
浏览 1提问于2019-01-24得票数 1
回答已采纳
我有一个菜单栏，有各种按钮，稍微下降，并改变颜色，因为我悬停在他们上面。
改变颜色很好，但是当我在一个按钮上悬停时，所有的按钮都会下降(而不仅仅是我在上面盘旋的那个按钮)。
HTML：
<div id="menu">
<div id="Button1" class="menuButton"></div>
<div id="Button2" class="menuButton"></div>
<div id="Butto
浏览 0提问于2015-10-25得票数 0
回答已采纳
7回答
我在display: inline-block中有三个div。在每个div中，我都有display: none的div，当我试图用$('#div-id').show(1000)显示隐藏的div时，最近的div“跳来跳去”，我应该改变什么？我确实喜欢看到div下的div只是绘制，而左边或右边的div不会改变他的位置。例如，两个带有我的问题的div (隐藏div在文本框中显示为onchange )
浏览 12提问于2011-03-02得票数 4
回答已采纳
奇怪的是，我没有改变任何东西，但是当我刷新页面时，元素被移到了左边。我的代码是：
<section class='gallery-set'>
<div>
<img class='tilesetsmall' src ='images/sample.jpg'>
</div>
</section>
对于gallery-set类，我的css很简单：
.gallery-set {
background-color:#447684;
border-radius:5px
浏览 0提问于2014-07-19得票数 0
2回答
所以我遇到过几次这个问题，为什么我的导航菜单被颠倒了呢？
.navigation li a {
display: inline-block;
text-decoration: none;
float: right;
margin-right: 10px;
}
ul {
list-style-type: none;
}
<div class="container-fluid">
<nav class="navigation">
<ul>
<li><a href=
浏览 5提问于2016-06-06得票数 0
我有一行水平的div元素，它们是display:inline-block的并且顶部对齐。
我可以添加元素，然后行就会展开。当我通过将宽度动画设置为0来删除元素时，这条线不会保留它的单线外观，而是强制在动画过程中临时出现第二条线。
IE、Webkit和Firefox中的行为是相同的。
我可以改变界面来避免这个问题，但我仍然想知道是什么导致了这个问题，如果可能的话，我想知道如何修复它。
下面是这个问题的一个缩小的例子。
body {
text-align: center;
}
#container {
height: 20px;
border: 1px dashed #AA
浏览 3提问于2010-02-11得票数 1
回答已采纳
1回答
我想要显示两个图像，但为什么当我将图像大小更改为300px时，即使使用显示属性inline-block，它们也会紧邻在一起？想象不应该是一个叠加在另一个之上吗？即使使用inline-block属性，图像大小如何改变图像的位置？
h1 {
margin-top: 0;
}
p {
padding-bottom: 0;
}
body {
margin: 0;
text-align: center;
}
.top-container {}
.middle-container {}
.bottom-containter {}
.top-cloud {
width:
浏览 0提问于2020-01-22得票数 1
1回答
我想知道在柔性盒容器中的子元素的display模式是什么。
是inline-block吗？或者它与通常的显示模式无关？
.flexbox {
display: flex;
}
span {
width: 200px;
}
<div class="flexbox">
<span>child</span>
</div>
例如，，子span受width影响，所以它不再是inline了。
据Chrome浏览器说，当我看到一台span受到width的影响
浏览 1提问于2016-09-28得票数 1
我想改变div的样式，但是我试图更改的div没有id或类。有人能帮忙吗？
这就是我想要改变的div：
<div style="display:inline-block">
我希望这样的结果是：
$('#ID/.Class').css({'display': 'block'});
我想得到的结果是：
<div style="display:block">
如果你能帮我那就太好了！
如果JQuery无法实现，请告诉我如何使用Javascript (如果您告诉我如何使用Javascript来完成它
浏览 6提问于2017-12-10得票数 1
回答已采纳
1回答
我对CSS相当陌生，我在这里实现的目标是，当我在图像上悬停时，会出现两个按钮(播放按钮和加号按钮)。然而，我现在拥有的代码，当我悬停时，只显示播放按钮。我想知道为什么会这样，我怎样才能让两者都出现。在这个项目中，我使用了React、HTML和CSS。
在此作出反应
function MainCard(){
return(
<div>
<div className="mainCardObject">
<ul>
<li>
浏览 3提问于2022-08-08得票数 1
回答已采纳
3回答
我希望div.div-block和p.div-p保持他们的默认display:block，但是div-inline是display:inline。所需的结果是三个水平的div's，每个都有几个垂直叠加的p's块。
我尝试过div.div-block div {display:inline;}，但是div.div-inline仍然是垂直定位的。当我添加div.div-block div p {display:inline;}时，div's是水平的，p's也是水平的。
<div class="div-block">
<div
浏览 1提问于2014-03-13得票数 0
回答已采纳
我不明白为什么会发生这种情况:我有两个内联div元素(一个里面有一个提交按钮)，它们通常是并排的。然后，我想让第二个div不可见(display: none;)，然后实现slideToggle jQuery函数来显示/隐藏该按钮。
当第二个div最初可见时，它们是并排的，一切工作正常。但是，当它最初不可见时，在单击div以显示按钮时，它会显示在第一个div的下面。
JSFiddle：()
<div>
<div style="display:inline-block; width:500px; background:red;" onclick="
浏览 0提问于2013-01-04得票数 0
回答已采纳
所以我有这个：
然后我添加文本：
.front {
background: #e0e0e0;
width: 100%;
height: 200px;
border: 5px solid black;
}
@keyframes animateonload {
0% {
top: 0;
left: 200px;
background: #80ed9d;
}
25% {
top: 200px;
left: 200px;
background: #9f80ed;
}
50% {
top
浏览 2提问于2020-05-13得票数 0
回答已采纳
下面有个代码。如您所见，div容器的width是40%。当我缩小宽度时，绿色div会下降，使foobar's保持在同一行中。我希望单词(foobar2，foobar3)降到foobar1下面。为什么会有这种行为？
这是。
<div style="width: 40%; background-color: blue">
<div style="display: inline-block; background-color: red">hello</div>
<div style="display:
浏览 1提问于2013-08-12得票数 0
回答已采纳
1回答
显示更改中断转换
、、、、
我不知道为什么，但是更改父元素的display属性会中断子元素的转换。
<div class="grandfather">
<div class="father">
<div class="child1 children"></div>
<div class="child2 children"></div>
</div>
</div>
CSS
.grandfather{
widt
浏览 5提问于2014-12-02得票数 2
有一个包div，里面有各种div，其中有些是绝对位置。
当我在Wrap div上悬停时，它会使用transformY:旋转(180 div )属性翻转，现在可以看到div的背面。我想改变所有内部元素的颜色，让它变成黑色，当包div被翻转时。
下面是我的问题的代码片段。我想改变的颜色的div(目前红色)时，他们的背面是可见的，但一旦他们在原来的位置，他们再次恢复红色。
body {
display: flex;
justify-content: center;
flex-direction: row;
}
.wrap {
display: inline-block;
po
浏览 2提问于2015-10-30得票数 3
回答已采纳
如何将display: none转换为display: inline-block，同时使用css进行旋转？
这就是我想要做的
html
<div class="wrapper">
<div class="squareV">
</div>
<div class="squareH">
</div>
</div>
css
.squareV {
display: inline-block;
height: 100px;
width: 100px;
浏览 1提问于2018-10-20得票数 0
回答已采纳
当我注意到一个我无法解释的差异时，我想弄清楚如何在使用ReactJS的元素之间应用水平空间。
以下是SSCCE：(也用)
<!doctype html>
<html>
<body>
<span>foo</span>
<span style='display:inline-block; width:30px'></span>
<span>bar</span>
<div id='div0'></div>
浏览 3提问于2016-03-03得票数 2
回答已采纳
1回答
我在div中有四个元素的一个作用域变量。当我更改该变量时，它会影响包含该变量的所有四个元素。我是angular js的初学者，不能单独处理它。
下面是一个更好地解释的例子：
JS：
/* controller-home.js ********************************************************/
app.controller("homeController", function($scope, $http, $state) {
$scope.heading = "SWITCHES";
$scope.bu
浏览 0提问于2018-02-06得票数 0
在对inline-flex元素应用清空修复时，我有一个奇怪的行为。当我将清除设置为具有inline-flex显示属性的元素时，它前面会出现奇怪的空白：
但是，当使用inline-block时，行为是不同的：
我不明白为什么inline-flex和inline-block有不同的行为。为什么它有那么奇怪的空间。
.a,
.b {
border: 1px solid red;
}
.a {
text-align: center;
}
.b {
display: inline-flex;
height: 20px;
width: 20px;
}
.cf:b
浏览 4提问于2016-08-10得票数 8
回答已采纳
5回答
我用HTML编写了这段代码，并希望将列表更改为内联显示，并且没有项目符号。
#highlight ul {
background-color: black;
list-style-type: none;
text-decoration: none;
margin: 0;
padding: 0;
display: inline;
}
<section id="highlight">
<div class="slide">
<div class="container">
浏览 56提问于2016-11-09得票数 -4
1回答
看上面的图片，这是我的CSS：
.activity {
width: 70%;
margin: 0 auto;
}
.activity .head {
margin-top: 3%;
text-align: center;
}
.activity .body {
margin-top: 3%;
}
为什么两个内联代码块不能在同一行？
<div class="body" style="background-color:red">
<div style="background-
浏览 0提问于2015-04-24得票数 0
我有这个html：
<html>
<head>
<title>Test divs</title>
</head>
<body style = "margin: 0px;">
<div style = "height: 50%; border: dashed; white-space: nowrap;">
<div style = "display: -moz-inline-sta
浏览 1提问于2015-02-12得票数 0
2回答
我有一个<div>，通过它的class设置了以下css属性
inline-blockfloat:左转清除: none
但是当我在Chrome工具“计算样式”区域看到这个对象时，display: inline-block就被识别了，但被划掉了，并被计算为"display: block“。为什么会发生这种情况？
此<div>的类名称为hbox_elem，计算样式如下所示：
我尝试了埃文的建议，现在我明白了，但它仍然行不通：
浏览 1提问于2012-02-19得票数 2
回答已采纳
5回答
我正在挣扎于一些基本的CSS布局流程。如果我有一个接一个的div，其中第二个div有负的上边距，我希望它与前面的div重叠。
然而，我发现虽然第一个div确实是重叠的，但它的内容不是。
<div style="background:green;height:20px;">
<span style="background:red;display:inline-block;padding:2px;">HELLO</span>
<span style="background:red;display:inline
浏览 6提问于2016-08-29得票数 2
回答已采纳
我试着把这4个单元放在一起，但它在Chrome上不起作用(它以前是有效的，没有改变)，但它在Firefox上起作用了。当我使用Chrome时，一行中的单元格之间有空格。这不应该发生。这就是我正在讨论的页面：
(不幸的是，由于我在StackOverflow上的声誉，我不能发布图片，我刚刚注册，我还是个业余爱好者)
下面是HTML：
<div id="mktwrapper">
<div class="row">
<div id="box-1" class="box">
<
浏览 3提问于2015-09-08得票数 0
3回答
我有一个带有display: block的div。在它内部，我有另一个带有display: inline-block的div。当我测量包含div的大小时，孩子的边界没有被考虑在内。它在浏览器的检查器中很容易看到。有没有办法扩展包含的div，使它的边界包含在内联块上？
下面是演示该问题的代码：
<div style="display: inline">
<div style="display: inline">aaa</div>
<div style="display: inline-block; widt
浏览 0提问于2013-06-01得票数 0
3回答
我有一个div，在这个div里面有一个带有背景和文本的图标。
当点击这个div时，我想要改变3件事: div背景，图标背景和文本颜色。我怎么才能只用CSS来做呢？
<div class="click">
<div class="icon"></div>
<div class="text">text</div>
</div>
.click{
width: 200px;
height: 100px;
background: blue;
浏览 0提问于2015-10-20得票数 1
为什么调整大小在此函数中有效，而在下面的函数中无效。这对我来说很重要，因为每次单击id为#test的div时，我都希望检索数据，而不仅仅是在开始时检索一次(工作示例)。
谢谢。
作品
$(document).ready( function() {
$("#tc").load("berichten.php");
$("#tc").draggable();
$("#test").click( function(){
$("#tc").toggle(); //.css("display"
浏览 0提问于2013-07-09得票数 1
回答已采纳
3回答
我想切换元素的可见性。目前，当点击button1时，它只是在隐藏，而不是切换。
这是我的代码，我想知道为什么它隐藏后不显示button2。
function fonk10() {
var x = document.getElementsByClassName("eben")[0];
if (x.style.cssText === "display:none") {
x.style.cssText = "display:inline-block";
} else {
x.style.cssText
浏览 0提问于2018-09-16得票数 1
回答已采纳
示例：
.outer{
background-color: pink;
}
.outer::after{
content:'';
background-color: red;
display: inline-block;
font-size: 0;
line-height: 0;
overflow: hidden;
height: 0;
/* display: table; */
}
.inner{
background-color: blue;
height: 300px;
}
&l
浏览 0提问于2019-09-20得票数 0
2回答
我有一个40%和60%的内联栏，但是由于某种原因，当我把内容放进去时，其中一个容器会被推倒。有人知道为什么会发生这种事吗？
HTML
<div class="grid">
<div class="long-col">a</div>
<div class="small-col">
<div style="font-size:18px;width:100%;">a</div>
<div style="
浏览 1提问于2016-06-09得票数 0
回答已采纳
1回答
我遇到了一个场景，在这个场景中，我有一个父容器，里面有很多div，我需要在一行中显示它。
的要求是：
div的数目会改变
每个项目的宽度将不同
应该有一个水平滚动条，我们可以在其中滑动和选择项目。
我尝试过多种解决方案，但没有什么能像预期的那样起作用。当我和display:inline-table一起尝试儿童div时，它在PC上工作，但在Iphone上失败了。
代码看起来像：
.container {
background-color: #fff;
border-top: 1px solid grey;
display: flex;
overflow:
浏览 2提问于2016-07-13得票数 0
回答已采纳
5回答
我有一个具有类属性display: block; width: 100%;的父div。我改变不了这个。
我试图在它的右边浮动一个较小的div，然而，它总是出现在父div下面。如何标记css？
.parent_div {
display: block;
width: 100%;
}
.child_div {
height: 51px;
width: 51px;
overflow: hidden;
position: absolute;
display: inline-block;
}
<div class="parent_div"><div
浏览 2提问于2014-07-26得票数 0
回答已采纳
1回答
我不太擅长CSS，但我发现这个问题不是我的错，而是铬的问题。我不明白为什么，我认为这是因为用户代理风格的强制，但即使没有它，我也不能对齐三列。下面是失败的代码(linux上的chrome)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style
浏览 2提问于2014-05-11得票数 0
回答已采纳
4回答
我有3个嵌套的div：
<div class="outer">
<div class="inner"><div class="item"></div></div>
</div>
.inner div是绝对位置，它们都有1px边框：
.outer{
width:50%;
height:100px;
border: 1px solid red;
position:relative;
overflow-x:hidden;
box-sizing:borde
浏览 5提问于2015-10-07得票数 5
回答已采纳
请先查看代码: html：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="menu">
浏览 3提问于2013-06-28得票数 1
回答已采纳
4回答
div有个小问题，我想把它放在form旁边，加上一些input标签。当我在两种情况下都使用display: inline-block时，div的位置略低于form的位置。
我真的不知道为什么，也不知道如何解决这个问题。我试图在网上找到答案，但失败了。
HTML:
<body>
<form class="row">
<input type="text">
<input type="text">
<input type="text">
<
浏览 4提问于2017-07-23得票数 0
2回答
如果选中，则更改复选框的图像背景
、、、、
我正在尝试实现此功能，但当我单击复选框(复选框处于选中状态)时，复选框不会改变其背景图像，并保持与以前一样。
我是如何做到这一点的：
<div class="checkbox">
<input class="car_checkbox" type="checkbox" value="1">
<span class="private_zip"></span>
</div>
和CSS：
input[type="checkbox"] {
浏览 4提问于2014-01-17得票数 0
1回答
当鼠标悬停在Along came上时，我希望文本the wolf能够滑入。但the wolf的地位不应改变。Along came应该简单地从左边滑进来然后淡入来完成这个句子。
.main {
width: 100vw;
text-align:center;
}
.addText {
display: none;
color: rgba(255,255,255,0);
transition: .5s;
}
.link:hover .addText {
display: inline;
color: red;
transform: translate(-10
浏览 2提问于2020-05-28得票数 4
回答已采纳
4回答
我有两个div，有两个主要属性显示块和宽度。
#block1 {
display:block;
width:20%;
background-color:red;
height:100px;
}
#block2 {
display:block;
width:70%;
background-color:yellow;
height:100px;
}
<div id="block1">
</div>
<div id="block2">
</div>
当我添加float属性时，它使两个div的行为类似于内联块：
浏览 2提问于2018-02-23得票数 0
回答已采纳
2回答
我认为自己是一个相当有经验的CSS用户，但这个问题使我感到困惑。我有一个基本的CSS设置，我希望以一种可预测的方式工作。
.grid {
display: grid;
}
.card > div {
border-left: 1px solid black;
height: 100%
}
<div class="grid">
<a class="card" href="https://example.com">
<div>
<p>
He
浏览 4提问于2022-03-30得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
