添加了display:inline-block，但我的HTML元素仍然溢出到不同的行
当给一个HTML元素添加了display:inline-block属性后，该元素仍然溢出到不同的行，可能是由于以下原因：
- 宽度不够：
display:inline-block属性会使元素以行内块级元素的方式显示，但是如果元素的宽度超过了父容器的宽度，仍然会导致溢出到下一行。解决方法是确保元素的宽度不超过父容器的宽度，可以通过设置width属性或者使用max-width属性来限制宽度。 - 空白字符：行内块级元素之间的空白字符（空格、换行符等）会被解析为一个空格，可能导致元素溢出到下一行。解决方法是去除行内块级元素之间的空白字符，可以通过将元素写在一行或者使用注释来消除空白字符。
- 字体大小和行高：如果行内块级元素的字体大小和行高设置过大，可能会导致元素溢出到下一行。解决方法是适当调整字体大小和行高，确保元素能够在一行内完全显示。
- 浮动元素：如果父容器中存在浮动元素，可能会导致行内块级元素溢出到下一行。解决方法是清除浮动，可以通过在父容器上添加
clearfix类或者使用clear:both属性来清除浮动。 - 文本换行：如果行内块级元素内部包含文本内容，并且文本内容过长，可能会导致元素溢出到下一行。解决方法是使用
white-space:nowrap属性来禁止文本换行。
总结起来，要解决行内块级元素溢出到不同行的问题，可以通过以下方法进行调整：
- 确保元素的宽度不超过父容器的宽度。
- 去除行内块级元素之间的空白字符。
- 调整字体大小和行高，确保元素能够在一行内完全显示。
- 清除浮动，确保行内块级元素不受浮动元素的影响。
- 使用
white-space:nowrap属性禁止文本换行。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：https://cloud.tencent.com/product
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
相关·内容
1回答
我发现了很多关于在Gmail中添加style="display:block"代码来消除图像周围空格的帖子。我还添加了"float: left“和行高"50%”，由于某些原因，我的消息仍然在表行之间添加空格。
还有其他的建议吗？我已经搜索了大量的论坛。
浏览 0提问于2012-02-16得票数 0
我对html、css、javascript、php和sql都很陌生，所以我试着编写一个简单的程序来复制商店的主页。这是基本的想法：
我希望所有的li项都在一行上，但是这不起作用，所以我查看了：，将display: inline更改为display: inline-block，并使用相同的html添加了float: left和float: right。
然后我看了看，去掉了display: inline-block，它仍然不能工作，所以我拿出了浮点数，并重新添加到display: inline-block中，它也不能工作。
最后，我看到了和display: flex justify-conten
浏览 0提问于2016-08-10得票数 0
我正处于创建一个简单网站的早期阶段。我正在尝试做一个带有4个按钮的导航，这些按钮在一个800 an容器div中占25%的宽度。所有按钮都被设置为显示内联块，并且应该是200 is宽，但是第四个元素被推到一个新的行上。
一开始我以为容器div的边框搞砸了，但我添加了框大小:边框；但它没有解决这个问题。然后，我从容器div上的一个边框更改为一个大纲，也没有运气。使用Chrome的“检查元素”工具，我可以看到每个按钮都是200‘s宽，但它们仍然不能放在一行上。这些部分的HTML和CSS如下：
HTML
<h1>Midwestern Accent</h1>
浏览 0提问于2015-11-18得票数 0
回答已采纳
链接到jsfiddle：
我有一个如下所示的HTML结构：
<div>
<input/>
<span>Label comes here...</span>
</div>
input和span都应该有display:inline。此外，span具有word-wrap:break-word，因此没有空格的长文本仍然可以换行。但是，如果文本很长，则<span>将显示在新行中，而不是保留display:inline-block。如果<span>中有空格，这不是问题。
浏览 7提问于2012-08-30得票数 0
我有li和display :内联，这样它就会以水平顺序显示。现在我需要增加一个线，所以我添加了下面这样的内容，
<style>
ul, li {
display:inline
}
</style>
<ul>
<li>Coffee</li>
<li>Tea<br></li>
<li>Milk</li>
</ul>
我将br移到li中，因为否则它会产生html验证错误。但是当br在li内时，它在新行开始之前增加了一个额外的空间。怎么摆脱它？
浏览 7提问于2014-02-19得票数 1
回答已采纳
3回答
为什么这两行“第一文本”和“第二文本”不是在同一行？
<html>
<body style="width: 20px;">
<div style="width: auto; display: block; white-space: nowrap;">
<div style="display: inline-block; float: left;">First text</div>
<div style="
浏览 0提问于2018-07-05得票数 1
回答已采纳
html：
<div class="parent">
<div class="sibling1">
</div>
<div class="sibling2">
</div>
</div>
css：
.parent {
background-color:red;
display:inline-block;
overflow:auto;
position:relative;
width:100%;
}
.sibling1{
min-hei
浏览 3提问于2018-11-06得票数 0
回答已采纳
我尝试使用css内联属性来使div节点显示在一行中，下面是我的代码
<html>
<head>
<style type="text/css">
.inline {
display: inline;
border: 1px solid red;
margin:10px;
}
</style>
</head>
<body>
<div>
<div class='inline'><div>I
浏览 3提问于2014-07-30得票数 18
我正在尝试在我的网页上显示带有文本的图像列表。但在IE7中，它将每个图像显示在另一个图像的下方，而不是其他图像的旁边。看起来是因为缺少对inline-block的支持。我读了一些文章，并在我的CSS中添加了一些东西，但它仍然不起作用。
他就是HTML：
<div id="image_example">
<div class="accept">
<h4>Acceptable</h4>
<img width="84&
浏览 0提问于2013-04-05得票数 0
3回答
我正在尝试做一行div，其中每个div有两行。我有以下代码：
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Row of Divs</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class
浏览 4提问于2015-04-09得票数 0
回答已采纳
我是html5的初学者。当我尝试调用html5 shiv时，页面不能在ie8中呈现。只有后台加载。
我添加了以下内容
<header>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script><![endif]-->
<script>
document.createElement('header');
document.createElemen
浏览 0提问于2012-09-18得票数 1
回答已采纳
我有几个按钮包含在div中，我想把它们放在同一行上。只有当某个值大于0时，才会显示其中两个按钮。我在div容器中添加了display:inline-block，认为它会将所有封闭的div放在同一行上，但它没有，我也需要按钮才能向右浮动(因此容器div中的style="float:right就可以了)。我还试着在每个按钮上放置display=inline，但这些按钮都没有工作。以下是我的HTML：
<div style="display:inline-block" style="float: right;">
<div *ngIf
浏览 0提问于2018-01-24得票数 0
回答已采纳
2回答
在下面的html中，我很难得到标签，它是对应的单选按钮，显示在同一行中，正确的方法是什么？
谢谢
<div class="display-field">
@foreach (var value in Enum.GetValues(typeof(items.titles)))
{
<div class="display-field">
@Html.Label(value.ToString())
浏览 1提问于2017-10-10得票数 0
回答已采纳
3回答
我在尝试将图像和h1标记在一行上对齐时遇到了问题。我尝试了display: inline和inline-block，它们都不起作用，只做了这两个的容器。我增加了宽度到100%的部分，但仍然没有。Float也不能工作，如果它工作了，它就会搞乱页面的对齐方式。我做错了什么？有时很难理解为什么它不能像预期的那样工作，需要一些帮助。
HTML
<section>
<img id="me" src="assets/img/pose1.jpg" alt="A photo of me." />
<h1>FOL
浏览 0提问于2013-09-08得票数 5
2回答
我有一长行内联阻塞的div，它们溢出到下一行。即使我将边距设置为0，也会得到行与行之间的边距：。
* {
padding: 0;
margin: 0;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
display:inline-block;
}
#container {
width: 300px;
height: 500px;
border: 2px solid red;
overflow: auto;
}
如何强制溢出行的
浏览 0提问于2013-01-19得票数 0
回答已采纳
我有一个非常类似的问题，。
我已经从派生了材料UI卡示例。链接。
基本上，我需要在父div中水平地将材料UI卡堆叠在一行中，当它们不适合时，它们会在前一行下面创建另一行。
所以当我写的时候：
render(
<div className="row">
<Demo /> <Demo />
</div>,
rootElement
);
我希望得到这两张卡片之外的另一张卡片。
我已经用display: "inline-block"添加了以下样式，但卡片仍然垂直堆叠：
const s
浏览 18提问于2018-08-10得票数 1
回答已采纳
2回答
参见。我试图使用bootstrap的css用输入填充表格单元格，但留下了一个无法消除的空白。
我的html代码片段是：
<table class="table table-bordered">
<tbody>
<tr>
<td class="with-input"><input class="form-control tall" type="text" value="text"></td>
<td cl
浏览 1提问于2014-11-19得票数 0
4回答
我在HTML中有以下3个元素：
.navigation {
display: inline-block;
width: 25%;
}
.content {
display: inline-block;
width: 50%;
}
.sidebar {
display: inline-block;
width: 25%;
}
<nav class="navigation">Navigation</nav>
<section class="content">Section</section>
浏览 1提问于2016-08-22得票数 3
回答已采纳
div (#second)正在溢出到它的li容器之外，用于height: 2em;的唯一方法是，它的发生是由于li中的一些神秘填充。但为什么？使用reset.css (比如说，由either编写)似乎也没有什么区别。请帮帮忙。(对于height: 1em来说，没有问题。)
这是
CSS：
li {
display: inline-block;
padding: 0 .5em;
border: 1px solid #ccc;
line-height: 3em;
}
#second {
display: inline-block;
backgroun
浏览 5提问于2013-11-21得票数 0
回答已采纳
3回答
我正在寻找html/css解决方案，以获得一些html元素的以下行为：
它必须在它之后强制一个新行，也就是说，在它之后不能有其他元素在同一行中。类似于div或display: block。
它的大小必须是他的内容之一，而不是扩大到所有的线。类似于span、display: inline或display: inline-block。
我们可以选择哪种元素(div，span，.)但是它必须是单一的，不可能使用，例如，一个span跟在一个br之后。
在下面的示例中，有几次尝试获得此行为，但均未成功：
body {
width: 200px;
}
#yellow {
浏览 0提问于2019-07-25得票数 2
回答已采纳
我找不到解决问题的办法。我不希望在子元素之间有任何空格，所以我添加了float:Leftto子元素。但是，当元素分解为2行时，就会产生问题。
HTML：
<span class="section-title">
<span class="yellow">This</span>
<span class="red">is</span>
<span class="brown">test</span>
<
浏览 7提问于2016-11-29得票数 1
回答已采纳
3回答
我有一个包含多行的<div>元素，每行都以一个图像开头，然后是文本。我希望文本紧邻图像的垂直中心，所以我将其放在div a div中，并设置了display:inline-block和vertical-align:middle，但文本仍然位于底部。下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<
浏览 0提问于2018-09-10得票数 0
我研究过Google Docs的css样式，我注意到了这样一件事：
.goog-inline-block {
position : relative;
display : -moz-inline-box;
display : inline-block
}
* html .goog-inline-block {
display : inline
}
*:first-child + html .goog-inline-block {
display : inline
}
ht
浏览 2提问于2011-08-25得票数 0
回答已采纳
JS Fiddle
我试图在左和右之间均匀地对齐子元素。我试着用空白处-左和右:自动，但什么也没发生。
这是一个屏幕截图的导航问题。我在每个元素周围添加了一个1 px的边框，这样您就可以看到：
我希望导航线的项目与他们的父母相比较。因此，在图像中，行项会向右移动，在父矩形之间移动一点，这是一个无序的列表。
下面是我对相关html的近似：
<nav>
<div id="main-nav">
<ul id="menu-main">
<li>cats</li>
浏览 1提问于2014-09-23得票数 0
回答已采纳
1回答
我有这样的菜单：。如果在浏览器中启动缩放(Firefox鼠标上的ctrl+roller )元素将被放大。但不是不成比例。在缩放的某些步骤中，最后一个菜单元素(我的文本3)跳转到另一行..。
如何保证一定的比例？(没有javascript)
编辑:现在我看到在铬100%变焦元素(我的文本3)是在另一行，但问题仍然相同，但反向-如果你要缩放元素(我的文本3)跳回第1行.
HTMl：
<ul>
<li><a href="#">my text 1</a></li>
<li><a href="#
浏览 5提问于2016-11-02得票数 0
回答已采纳
2回答
我试图实现我的文本如下：
但结果却是这样的。但我希望它是内联的：
蓝色文本是弹出的小测验形式。我将这段代码添加到文本中，并添加了“display:inline；”，这最初是不存在的。但还是有帮助的。
<a data-tf-slider="MZu8Cj" data-tf-width="550" style="display:inline-block;color:#6EC4D7;text-decoration;font-size:16px;cursor:pointer;">Turvallisen Lääkityksen
浏览 6提问于2021-11-09得票数 0
1回答
我正在寻找一种方法来创建一个水平菜单，在这个菜单中，当菜单项的数量超过容器空间时，菜单项是对齐的，有填充，并溢出到一个新的行。
HTML：
<div id='upper-menu-wrapper'>
<div id='upper-menu'>
<ul>
<li>About</li>
<li>Parenting</li>
<li>Receipes</li>
<li>Devot
浏览 2提问于2014-05-14得票数 0
回答已采纳
3回答
如何将<h2>元素与input字段和button放在一行中？标题总是浮动在搜索字段的上方。
#header {
background-color: grey;
display: inline-block;
width: 100%;
padding: 2px 5px 2px 5px;
}
<html>
<header id="header">
<h2>MovieDB</h2>
<input type="text" placeholder="search movie
浏览 2提问于2015-12-11得票数 0
回答已采纳
我对一些显示两个跨度的UI有问题，每个都有一堆复选框。HTML看起来像：
<strong>Areas Impacted</strong>
<div class="arealist">
<span class="group"><label><input type="checkbox" />Select All</label></span>
<span class="areas">
<label>&l
浏览 1提问于2013-01-24得票数 0
回答已采纳
我有一个包含多个跨度的div。每个跨度都有填充和背景色，以将其与其他的分隔开来。问题是，当跨度溢出到下一行时，不同行上的跨距重叠。我已经尝试分配顶部和底部的页边距，但它们被忽略了。我如何在两个跨度之间设置一个间隔？
html：
<div class='container-div'>
<span class='item'>foo</span>
<span class='item'>blah blah</span>
<span class='item'>
浏览 1提问于2015-09-10得票数 3
回答已采纳
2回答
好的，我试着在html/css中做一行不同的文本位。这将是肚脐的前兆。我的HTML是：
<div id="navBar">
<p class="navBartext">About</p>
<p class= "navbartext">News</p>
<p class= "navbartext">Contact Us</p>
<p class= "navbartext">Jobs</p>
</div&g
浏览 4提问于2013-12-01得票数 0
回答已采纳
1回答
我有一堆积木漂浮在左边。它们有不同的高度；有些短，有些高。
现在，这些块是动态生成的，所以无法预测每个块有多高(或者有多少)。但是，需要灵活，所以如果这些块不能全部放入一行，那么，我需要第二行。
问题:由于块的高度不同，任何溢出到下一行的块都会“嵌套”在现有的浮点数中：
我需要溢出块来形成它们自己的行：
我知道这是正确的行为(浮点数更喜欢更高的位置而不是左-er位置)，但对此最好的解决方案是什么？我可以改变HTML结构(当然还有任何CSS)，但是我不能在clear: left中硬编码。
浏览 0提问于2011-12-30得票数 2
回答已采纳
我有一个网页，我已经堆叠了我的div的内联区块属性。然而，它只在Firefox中的两个div之间添加额外的空格。这个设计在Safari和Chrome中是一致的。
以下是用于该操作的示例。
#main {
display: block;
}
#sub11, #sub12, #sub21, #sub22, #sub31, #sub32 {
display: inline-block;
background:red;
padding:0;
//margin-right:-4px;
margin-top:3px;
margin-bottom:3
浏览 0提问于2013-05-14得票数 1
回答已采纳
3回答
我尝试将三个h4元素放在同一行，我尝试使用display:inline-block；放在所有元素上，但这只将其中两个元素放在同一行，第三个元素在它们下面。
这是我的HTML
<h4 id="vbottomcreator"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbotto
浏览 0提问于2015-03-09得票数 0
当我想展开文本时，我总是使用以下jQuery代码：
jQuery(".readMore").bind("click", function () {
jQuery(this).text(jQuery(this).text() == "Leer más" ? "Ocultar" : "Leer más");
jQuery(this).prev().slideToggle();
});
});
以及如下HTML代码：
<div class="alwaysDisplay">
浏览 3提问于2014-02-02得票数 1
回答已采纳
1回答
IE浮动悬停问题
、、
IE11 + WIN7。这是我的HTML...
<!doctype html>
...
<ul id="horizontal-menu">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
我的CSS是这样的.
#
浏览 0提问于2014-04-14得票数 0
我有下面的代码，我试图理解为什么所有的元素都不在同一行上。这是因为我添加了填充，但是在布局元素时不应该考虑填充吗？我查看了IE、Firefox和Chrome浏览器。它们都布置了下一行的最后一个元素。
有人能解释一下为什么吗?我怎样才能让所有的元素都在同一行上，并保持我放在它们上面的填充？
谢谢
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8&
浏览 0提问于2012-01-17得票数 1
回答已采纳
考虑到这个标记：
<ul>
<li>
<div id="container">
<button>toggle display</button>
<div>text</div>
<div>text</div>
</div>
</li>
</ul>
假设#container元素的计算的CSS display值是block，
浏览 9提问于2014-07-04得票数 2
回答已采纳
我似乎想不出如何让复选框和相关的文本显示在一行上。文本很短，所以看起来不是宽度问题。我尝试在控件上设置display:inline，但当呈现它时，在input和label周围添加了一个span，它具有display:inline。如果我使用Chrome中的资源视图手动将display:inline添加到结果标签中，那就没问题了。问题是我不知道如何让控件做到这一点。
谢谢。
浏览 0提问于2013-11-10得票数 8
回答已采纳
3回答
我有以下HTML代码：-
<html>
<head>
<meta charset="utf-8">
<title>Personal Site</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="header1">
hello world
浏览 0提问于2020-11-01得票数 2
回答已采纳
我有一个锚定标记，并且我使用:before选择器来添加一些文本。我已经在锚标签周围添加了一个悬停状态。:before文本比锚标记中的其余文本稍大一些，我在前面的文本中添加了一个display: inline-block属性。
当我将鼠标悬停在锚点标记上时，悬停状态紧紧围绕着所有锚点文本，包括:before文本(codepen中的示例1)。如下所示：
但是，如果我将display:inline-block属性添加到锚标记中，悬停状态将是一个矩形，它与较大的:before文本的高度相匹配。如下所示：
为什么会这样呢？
.link-1:hover, .link-2:hover {
o
浏览 0提问于2019-02-13得票数 1
我正在尝试用最基本的html和css做一个非常简单的覆盖报告。这是我到目前为止所知道的：
pre div {
background-color: green;
display: block;
}
<pre>
<code>
<div>Option Explicit</div>
Sub HelloWorld()
Debug.Print("Hello World")
End Sub
</code>
</pre>
这可以正常工作，但是div标记似乎在包含Option Explicit
浏览 0提问于2021-10-31得票数 0
我想知道，为什么具有display:inline-block样式的空div与包含文本的div的行为不同。它似乎为以下元素添加了一些顶填充，这些元素是无法删除的。
<p>
<div class="a">A</div><div class="b">B</div>
</p>
<p>
<div class="a"></div><div class="b">B</div>
</p>
浏览 1提问于2014-10-10得票数 0
回答已采纳
2回答
div元素不考虑内联列表的填充
、、、、
我使用的是内联列表，并且我注意到下一行的div不会使用它的填充(也就是说，它是通过li元素的边界绘制的)。有什么我能做的吗？
<html>
<head>
<style type="text/css">
ul {
margin: 0;
padding: 0;
}
li {
display: inline;
list-style-type: none;
padding: 10px;
border: 1p
浏览 0提问于2011-02-28得票数 1
回答已采纳
4回答
当我试图将两个div放在一起时，我遇到了一个问题。
display: inline删除我的边框，而不是将两个div放在同一行上。
请告知：
.gig {
outline: 1px solid green;
width: 400px;
height: 200px;
display: inline;
}
<div class="gig">
<h3>The band</h3>
<p><em>We love to play</em></p>
<
浏览 7提问于2016-02-18得票数 0
回答已采纳
我有一个菜单的一些HTML代码，我已经开始为菜单创建CSS，但是我已经停止了，因为我不知道下一步该去哪里
到目前为止，我已经添加了这个CSS：
#menu-my-integra, ul.sub-menu {
list-style: none;
padding: 0;
margin: 0;
}
#menu-my-integra li {
display: inline;
margin-right:10px;
}
ul.sub-menu {
display:none;
}
#menu-my-integra li:hover ul.sub-menu {
浏览 2提问于2015-11-10得票数 1
回答已采纳
2回答
在下面的示例中，我尝试添加一些内联输入范围元素，这些元素与行对齐，但也与外部div的右边缘对齐。在实际的站点中，html是通过运行的代码，所以它只是<pre>元素中的<span>元素，所以空格，特别是换行符是相关的。
在任何情况下，我都会插入这些由2个div包装的<input type="range">元素，并尝试让它们与外部容器右侧的同一行中的内容对齐。
我实际上还没有找到解决方案。最初，我有一个正常的字体大小，如果我在.holder中添加一些多余的内容，事情看起来是对齐的，但实际上，一旦我增加了字体大小，它们实际上并没有对齐。
有什么方法
浏览 1提问于2020-03-26得票数 0
我的代码看起来像下面这样：
#DigiCertBlahBlah {
display: inline-block;
width: 200px;
}
#formLogin {
display: inline-block;
}
<div class="content">
<img src="images/logo.png" />
<form name="formLogin" id="formLogin" method="post" action="Login
浏览 2提问于2019-09-04得票数 4
我正在创建一个MVC1.0表单，以便在多个视图中使用。我有一些元素需要显示在同一行上，我已经通过将样式的显示设置为" display : inline“来实现这一点。我还向CSS添加了左边界设置，以强制行内元素之间的间距，但这似乎没有设置。
我的CSS有：
fieldset label.inline { display: inline；margin left: 2em；}
视图代码为：
<fieldset>
<legend>Details</legend>
<p>
<label for="St
浏览 3提问于2010-03-01得票数 0
如何确保标题下的行与文本本身的长度相同？
这是我的HTML：
<h2>Hello world!</h2>
这是我的CSS：
h2:after {
content: " ";
display: block;
width: inherit;
height: 4px;
background-color: #f77f00;
color: #f77f00;
}
我试过的是：
伪元素的设置宽度为100%
宽度:继承伪元素
CodePen示例：
浏览 0提问于2018-04-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
