即使使用display inline-block，CSS中的填充也不起作用
在CSS中，使用display:inline-block属性可以将元素显示为内联块级元素，它具有内联元素的特点，同时又可以设置宽度、高度、边距等属性。然而，使用display:inline-block属性时，CSS中的填充（padding）属性可能不会起作用。
填充属性（padding）用于设置元素内容与元素边框之间的空间。当元素的display属性值为inline-block时，填充属性可能会被忽略或不起作用。这是因为内联元素的特性决定了它们不会独占一行，而是根据内容自动换行，因此填充属性对内联元素的影响有限。
解决这个问题的方法之一是将元素的display属性值设置为block，而不是inline-block。这样可以将元素显示为块级元素，填充属性就会起作用。另外，还可以使用其他布局方式，如flexbox或grid布局，来实现更灵活的布局，并能够正确应用填充属性。
腾讯云提供了一系列云计算相关的产品，其中与前端开发和CSS相关的产品包括腾讯云CDN（内容分发网络）和腾讯云Web应用防火墙（WAF）。CDN可以加速静态资源的传输，提高网页加载速度，而WAF可以保护网站免受恶意攻击。您可以通过以下链接了解更多关于腾讯云CDN和腾讯云WAF的信息：
腾讯云CDN产品介绍：https://cloud.tencent.com/product/cdn 腾讯云WAF产品介绍：https://cloud.tencent.com/product/waf
相关·内容
1回答
我试过在CSS中填充一个按钮，但是左边的外部填充不起作用。
.button-container {
padding-left 20vh;
padding-bottom: 1vh;
display: inline-block;
}
.button {
background-color: ##09b39f;
border: none;
padding: 2vh;
text-decoration: none;
display: inline-block;
border-radius: 2vh;
}
<div class="button-container">
<
浏览 2提问于2018-04-17得票数 0
我有一个下面的html代码：
<div class="panel">Some Text Here</div>
附加了以下css
.panel{
display:inline-block;
height:100%;
border:1px solid black;
}
因为面板有一个边框，所以会出现垂直滚动条，有没有办法让CSS 100%识别包括填充、边距和边框？
浏览 1提问于2010-05-13得票数 1
回答已采纳
2回答
我试图使许多列的高度相同，并决定沿着display:table CSS路线前进。
<div class="header" style="display: table; width: 100%; background-color: yellow">
<div class="title" style="font-size: 30px; display: table-cell;">Navigation Title</div>
<div class="navigation"
浏览 6提问于2013-12-23得票数 2
回答已采纳
我需要在一个div宽度内包装几个图像，一个静态填充。Div必须水平居中。我需要它具有响应性，即div的最大宽度(包括填充)必须设置为100%。
<div class="content">
<img src="http://placehold.it/350x150"/>
<br/>
<img src="http://placehold.it/250x150"/>
</div>
css：
body {
text-align:center;
}
.content
浏览 0提问于2014-07-15得票数 5
回答已采纳
谢谢你抽出时间阅读这篇文章。
我试图使用CSS做一些简单的布局，其中我有一个容器div，两个子程序使用内联块并排设置：
<div class="info-window">
<img class="image" src="myURL"/>
<div class=description">some content</div>
</div>
在CSS中，我设置了容器高度，自动调整图像的大小，使其高度为100%并保持该比率，并且我没有为描述指定任何大小(我希望它将由其内容
浏览 3提问于2017-10-20得票数 3
回答已采纳
为什么填充和边距在块img上有效，而在内联上不起作用。
我在CSS中的图像有一个布局问题。我希望每个图像之间没有像素(没有边距，没有填充)，我想要4个图像的行。
填充或边距(设置为0)唯一有效的方法是使用display:block作为图像样式的一部分。一旦我使用inline，在每个图像和填充之间有几个像素，边距被忽略。
无论如何，我可以在内联的图像中获得我自己的填充和页边距？
浏览 1提问于2013-03-20得票数 0
2回答
我将两个images并排放在header下的一个页面上作为col-50。问题是，我希望这两个图像的全50%宽度，没有任何填充周围的任何边缘。我似乎不能用CSS解决这个问题
<div class="col col-50 row-no-padding">
<img src="img/facebook.jpg" style="width:100%; display: inline-block">
</div>
<div class="col col-50 row-no-pa
浏览 0提问于2015-12-19得票数 0
1回答
我想在sup元素中添加圆角和一些填充。
<div>Here is my main text<sup>sup text</sup></div>
<style>
sup {
background-color:#f00;
}
</style>
默认情况下，sup元素具有display:inline;。我可以设置display:block;并使用填充和旋转的边角进行操作，但我应该修改sup结构，因为HTML现在是阻塞的。有没有可能用填充和圆角来装饰sup而不修改HTML结构，而仅仅是CSS。
谢谢。
浏览 0提问于2012-07-08得票数 1
回答已采纳
下面是代码：
我正在使用一个react实现的CSS库的一部分，实现一个进度条。它在css端的测试中工作得很好，但当我在react中实现它时，实际的填充条就在它的容器之外。它位于下面几个像素的位置。我意识到css测试的测试文件中没有<!DOCTYPE html>。添加它打破了我的风格，或者暴露了我已经打破的风格。
我设法把它换掉了
.progress-bar > * {
background: #008be1;
height: 4px;
display: inline-block;
}
为
.progress-bar > * {
backg
浏览 0提问于2019-03-28得票数 0
3回答
假设我想将div的display属性设置为inline-block。在CSS中，我会做类似以下的事情：
#divid {
display:inline-block;
/* And now for IE6 and IE7 */
zoom:1;
*display:inline;
}
但是现在假设我希望能够使用普通的JavaScript或jQuery将div的显示属性动态地更改为内联块。另外，假设我对相关页面的HTML和CSS一无所知；我刚被传递给div，我需要更改它的属性。如果我不担心IE6和IE7，这很简单：
$("#divid").css(&#
浏览 0提问于2011-06-26得票数 3
回答已采纳
我试着把三个项目的列表显示为水平而不是垂直。然而，使用显示:内联或显示:内联块。一直没起作用。我尝试了float: left，但这使得页面非常混乱，不起作用，并且由于某种原因也扩展了页脚和页眉。这是页面：
这是我的CSS：
/*Patients Style*/
/*Trying to line up the 3 .pdfs*/
ul{
list-style-type: none;
margin:0;
padding:0;
}
.doc-thumb {
display:inline block;
text-align:center;
}
div
浏览 13提问于2014-07-21得票数 0
回答已采纳
如果容器宽500 6px，标签宽30%，输入框宽70%，那么一切都应该适合，但问题是，输入框的左、右边框为4px，填充左和右为2px，使其6PX比它更宽。
我们可以破解它，使宽度不是70%，而是68%或什么，但这是有点麻烦。有办法处理吗？(我们不能重新设置CSS，因为输入框通常需要一个边框，假设我们不使用outline来破解它，它不占用任何空间)。
CSS：
#my-container { width: 500px }
#first-name-label { display: inline-block; width: 30% }
#first-name { display: inline-bl
浏览 4提问于2014-04-26得票数 0
回答已采纳
我想在我编码的网站上做一个这样的菜单，我不知道该怎么做。左边和右边的填充/边距应该调整大小，以便菜单始终具有特定的宽度，等等，在这种情况下是700px。我不知道我应该在CSS样式中搜索解决方案，在JavaScript中还是两者都有，哪一个是最简单的？
<div id="footerMenu">
<ul>
<li><a href="tools.php?tool=galeria">O nás</a><
浏览 0提问于2014-08-28得票数 0
2回答
我正在尝试(它不起作用)基于表单输入来填充元素。如果输入大于一个整数，则应该更改填充。这是我现在的剧本。
function pad() {
if ($('input[name=amount]').val().length > 1) {
$('ibet').css('margin-left', '6px');
} else {
$('ibet').css('margin-left', '');
}
}
HTML是
<p id = "ibet">$<
浏览 3提问于2015-06-24得票数 0
回答已采纳
构建css水平菜单时，我将填充和内联块元素应用到链接本身，这样就可以单击整个块，而不仅仅是链接文本。通常，我浮动我的UL嵌套菜单，但事件，如果我浮动这个列表，它仍然是垂直堆叠，我怀疑这是由于内联块。我不喜欢使用浮动，因为我看到的几个例子表明，这是可以做到的，但我没有运气使内联块或平面与我的css工作。
示例：
HTML
<div id="navigation">
<ul>
<li><a href="#"> Link 1 </a></li>
<li&g
浏览 4提问于2014-09-07得票数 0
回答已采纳
1回答
我想在我的代码填充中给出一些响应性的li，根据浏览器的宽度增加或减少。
我认为这和使用padding: 0 5%一样简单，但是它不起作用，这会导致7.063px的填充，如果浏览器的大小增加或减小的话，它不会改变。
.wrapper > * {
display: inline-block
}
ul {
list-style: none;
padding-left: 0;
}
li {
display: inline-block;
padding: 0 5%;
}
<div class="wrapper">
<h1>
浏览 2提问于2019-01-27得票数 2
回答已采纳
4回答
我使用这个CSS/HTML组合来模拟一个两列的布局：
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="two-cols">
<div class="left-col">
<img src="http://stott.customer.net
浏览 5提问于2012-12-27得票数 5
回答已采纳
下面是我所说的示例代码：
HTML
<ul class="table">
<li class="table-cell"></li>
<li class="table-cell"></li>
<li class="table-cell"></li>
<li class="table-cell"></li>
</ul>
CSS：
.table {
display: table;
}
浏览 0提问于2013-02-08得票数 21
回答已采纳
2回答
我使用的是JQuery UI排序，这似乎强制可排序元素具有显示:块。
但是，我希望这些元素具有显示:内联块。
我试过使用css：.item { display:内联块！重要；}
但它不起作用(如Chrome控制台中的计算样式所示)。
我还尝试使用以下jquery语句：$('.item').css({display：‘内联块’})
但这也不起作用。
如何覆盖JQuery UI样式？
浏览 2提问于2013-12-19得票数 0
回答已采纳
你好，我需要css样式的帮助。
我正在尝试有一个响应式的主菜单，但找不到一种方法来保持文本在项目框中水平居中，一旦这些项目框由于低视口宽度而开始收缩。
.container {
display: flex;
justify-content: center;
}
这允许灵活的水平居中菜单项
.item {
padding: 5px 30px;
text-align: center;
}
一旦框开始缩小，左边的填充被保留，而右边的填充被“溢出隐藏”，这使得文本相对于它们的.item容器偏离中心。
我需要文本在项目框中居中，同时在宽度足够的情况下在文本周围保留一些固定的水平填充(
浏览 0提问于2015-05-29得票数 0
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
white-space:nowrap;
}
body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
#body {
min-width:1015px;
浏览 1提问于2014-08-20得票数 4
回答已采纳
2回答
标题可能有点混乱。
我有一个列表的一些元素，每一个有一个CSS悬停效果应用(背景减轻)。但是，我希望每个元素都能填充其容器中的所有空间，而目前它们并没有这样做。
例如：
应如何：
此外，我需要元素紧密结合，内联元素样式，如第一个例子所示。我已经查看了display:inline和display:inline-block标签上的div；但是，这导致了div的行为类似于第一个示例(元素没有填充它的所有水平空间，可以从悬停效果中看到)。例如：
<div style="display:inline-block">Example 1</div>
浏览 5提问于2015-04-30得票数 0
回答已采纳
3回答
我有一个HTML片段：
<ul class="custom">
<li data-bullet="a">Item 1</li>
<li data-bullet="aa">Item 2</li>
<li data-bullet="ab">Item 3.1<br/>Item 3.2</li>
<li data-bullet="c">Item 4</li>
<
浏览 4提问于2014-12-02得票数 3
回答已采纳
5回答
我在HTML上有一个列表
<div id="header" class="row">
<div id="logo" class="col_12">And the winner is<span>n't...</span></div>
<div id="navigation" class="row">
<ul id="pirra">
&l
浏览 58提问于2013-04-18得票数 117
回答已采纳
4回答
表单元格底部的白边/填充
、、、、
看看这个JSFiddle：
HTML：
<table>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
<div></div>
</td>
</tr>
</table>
CSS：
table, tr, td
{
padding:0px;
margin:0px;
bor
浏览 4提问于2013-12-30得票数 0
回答已采纳
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
回答已采纳
2回答
所以我遇到了一些我以前没有经历过的事情，但它似乎影响了所有的浏览器，所以我猜是正确的行为，我只是不知道为什么。
我有一个被设置为inline-block的元素wrapper。在这个包装器中，我有三个元素，它们也被设置为inline-block。
如果我在元素上设置了一个固定的padding-right: 10px，那么它就是。但是，如果我将填充设置为百分比padding-right: 10%，则最后一个元素为。为什么会这样呢？
它可以(在某种程度上)将inline-block从wrapper中剥离出来，但在我的设计中，这一点非常关键。
HTML：
<div class="wrap
浏览 0提问于2014-11-15得票数 0
我希望在一个容器块元素中水平居中两个(或可能更多)行内块元素。它应该看起来像这样：
--------------------------
| _____ _____ |
| | | | | |
| | foo | | bar | |
| |_____| |_____| |
|_________________________|
然而，在我的坏代码中，它目前看起来是这样的：
--------------------------
| _____ ____ |
|| | |
浏览 70提问于2012-01-06得票数 61
回答已采纳
2回答
有没有办法设置背景css精灵图片的宽度？
<a href="#">shop</a>
a{
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
display: block;
background-position: -5px -5px;
padding: 0 0 0 30px;
}
现在上面的a标签是60px的宽度，30p
浏览 33提问于2017-02-23得票数 0
2回答
我正在尝试使用Wordpress的CSS。然而，我尝试了这么多东西，但由于某些原因，我无法解决它。
我想在菜单栏中的链接之间有更多的空间，所以我添加了填充。我创建了以下代码：
.main-navigation li {
display: inline-block;
float: none;
list-style-type: none;
padding-right: 30px;
下面是另一个CSS代码
.main-navigation a {
display: block;
text-decoration: none;
color: white;
.main-navigation a:hov
浏览 12提问于2017-03-12得票数 1
1回答
我的.container不能显示填充。我已经尝试了多种方法，但都不起作用。
CSS：
nav{
border-style: solid;
border-color: green;
float: left;
padding-left: 10px;
padding-right: 10px;
display: inline-block;
height: 70vh;
}
ul{
padding:0px;
list-style-type:none;
}
.container{
border-top: solid;
浏览 1提问于2016-03-10得票数 1
想象一下，我有一个DIV。我希望将它与其他div一起显示在一行中，所以我在一个CSS表中为它提供了display: inline-block和其他样式定义。
现在I浏览器想要用display: inline;来实现我想要的行为。
我如何给Internet Explorer一个单独的样式命令来覆盖好的浏览器的定义，这样只有IE才会有display: inline;。由于技术限制，我不能在超文本标记语言中使用<![If IE] -->-stuff，我需要留在CSS文件中。
浏览 2提问于2011-03-29得票数 0
回答已采纳
1回答
我正在工作的网站需要支持IE7和display: inline-block，但在那里不起作用。
通过搜索，我发现*display: inline;和*zoom: 1;可以解决这个问题。问题是，这不会在我编译的CSS中显示出来。
即使是zoom: 1;也不能编译(没有星号)。可以肯定的是，我在同一个CSS类中添加了一些其他有效的属性，并且可以正常工作。
总而言之:我不能让zoom和IE7 CSS属性选择器(*)在我的浏览器中使用LESS。有什么办法解决这个问题吗？
<script>less = {env: 'development'};<script>
浏览 0提问于2013-03-21得票数 1
我正试图完成“奥丁计划”的一项任务。目标是创建一个蚀刻素描类网页。我已经走得很远了，但是我一直在尝试动态地调整一个div网格的大小。
我有一个容器div，我将其设置为500x500px。然而，我尝试过的任何东西都没有让容器div适当地填充空间。我觉得我在CSS中遗漏了一些琐碎的东西，但我想不出是什么。
CSS：
.outer {
width: 500px;
height: 500px;
position: absolute;
}
#gridtable {
width: 100%;
height: 100%;
}
.outtable {
ba
浏览 2提问于2015-02-13得票数 0
回答已采纳
我有一组列表项，在一起，例如填充50×50的空格。但是实际的<ul>标签填充了一个看似随机的宽度和高度，这与组成列表的<li>标签的位置或大小无关。下面是该列表和列表项的CSS。
ul {
list-style-type: none;
display: inline;
}
li {
float: left;
padding: 10px;
}
<ul>
<li>Example</li>
<li>Example Two</li>
</ul>
这给了<ul>标
浏览 7提问于2022-02-22得票数 0
1回答
CSS:表列中的标签
、、、
背景：
我想在表格的列上贴上小标签。在我的项目中，我正在使用HTML5 5/CSS3 3的一些实现部分，本节专门针对移动设备。虽然这两个事实并不一定相关，但底线是我不需要支持Internet，甚至火狐(只支持WebKit)。
问题
使用我当前的CSS方法，单元格的垂直填充来自<span>元素(设置为display: block并带有上/下边距)，该元素包含列的“值”。因此，当<span>为空或缺失(没有值)且标签不到位时，就没有填充。
“完全”可能会让你知道我希望标签在哪里，即使没有价值，<span>也不在那里。
我意识到我可以使用“不破坏空间”，但我真的很
浏览 1提问于2010-05-24得票数 0
回答已采纳
为什么调整大小在此函数中有效，而在下面的函数中无效。这对我来说很重要，因为每次单击id为#test的div时，我都希望检索数据，而不仅仅是在开始时检索一次(工作示例)。
谢谢。
作品
$(document).ready( function() {
$("#tc").load("berichten.php");
$("#tc").draggable();
$("#test").click( function(){
$("#tc").toggle(); //.css("display"
浏览 0提问于2013-07-09得票数 1
回答已采纳
我已经试过很多次了，但它根本不起作用。我需要在div中心的浮点图像。所以我不需要做填充和毛边。当我再放一张照片的时候，它会自动的很好。
HTML
<div class="section-global">
<p class="red"> HELLO </p>
<p>
<ul class="image-global">
<li>
<img src="assets/images/w
浏览 7提问于2014-02-26得票数 2
回答已采纳
我知道很多技术可以将div并排定位.然而，我从来不明白为什么采取两个边框的宽度: 50%不会产生并排的div。根据我对css的理解，边距、填充边和边框超出等式，这是绝对可行的。
body {
padding: 0;
margin: 0;
border: 0;
}
div {
height: 300px;
box-sizing: border-box;
display: inline-block;
margin: 0;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.h
浏览 4提问于2015-09-24得票数 3
回答已采纳
我目前正在使用这个问题中接受的表格布局答案：将两个图像放在一起，保持它们的纵横比，并在缩放时保持它们相同的高度。我也希望在每幅图片上有一个8 8px的左填充。不管ul/桌子有多宽，我都希望这个垫子保持8px。
这是我正在做的小提琴：
下面是HTML：
<ul>
<li><img src="http://walops.com/wp-content/uploads/Puppy-Awesome-Wallpaper-100x100.jpg" /></li>
<li><img src="http://photos.
浏览 1提问于2016-08-24得票数 4
2回答
我正在努力使代码中的文本只填充80%的body元素。不确定是否应该使用宽度元素或填充。现在也不是为我工作。
HTML：
<body>
<div id="full">
<h3>
The Idea
</h3>
<p class="paragraph">
text
</p>
<h3>
浏览 1提问于2017-07-14得票数 0
回答已采纳
我在页面上有一些display: block元素，但是我需要一些元素只接受它们所需的内容，所以我可以使用
display: inline-block;
(这种方法的问题是高级边距没有合并，所以如果混合元素与块和显示块边距看起来不一致)
或
display: block;
width: fit-content;
这样做的问题是fit-content在IE中不起作用，甚至更多的MS Edge检测CSS技巧在未来可能不起作用。
有谁知道一个优雅的问题来解决这个问题？
因此，我需要元素的所有属性都是display: block，但要有width: fit-content，或者行为要像display:
浏览 0提问于2015-12-04得票数 0
3回答
我在包装div中并排放置两个div时遇到了一些问题，一个是左对齐，另一个是右对齐。
下面是我的代码：
<div class="member_top" style="padding:15px; background:#DDD;">
<div class="member_top_wrap" style="width:960px; margin:0 auto; position:relative;">
<div class="member_top_left" styl
浏览 7提问于2012-02-26得票数 1
回答已采纳
2回答
我想要一个导航条与绿色背景填充100%的屏幕宽度，文本和标志是位于导航栏的中心。
这是我的html和css
*{
margin: 0;
padding: 0;
}
html {
width: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: normal;
background-color: #e9eaed;
margin: 0;
padding: 0;
}
浏览 0提问于2014-11-28得票数 0
回答已采纳
当我使用切换函数并调整窗口的大小时，导航仍然没有显示，而且这个调整大小的函数不起作用。有什么建议吗？
$(document).ready(function(){ $("#menu").click(function() { $( ".nav" ).fadeToggle("slow", "linear");});
$(window).resize(function() { if ($(window).width() < 768) { $('.nav').css("display", "n
浏览 2提问于2016-10-23得票数 0
回答已采纳
我一直试图使用css来用破折号填充段落的最后一行，但我似乎找不到这样做的方法。
基本上，我从数据库中获取一些数据(文本)并将其输出到一个段落中，但我不知道它是多少文本，也不知道父div的大小。
考虑到所有这些，我需要用破折号填充该段最后一行的剩余空间。
例如：
Lorem ipsum dolor坐好了，敬请光临。Nunc eu malesuada lacus，在aliquam diam。nibh.---------------------------------------------------------------------------------------------------
浏览 1提问于2016-01-17得票数 1
回答已采纳
我有一个页面，在内联块中有一个div结构。现在，每个块div都有一个最小大小，当窗口大小缩小到小于所有内部div最小宽度之和时，我将一些元素移到下一行。现在，我希望将一个填充添加到div中，它将单独移到下一行，并且我不希望使用js来实现这一点。我怎样才能在CSS中做到这一点呢？
<div width="100%">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
<div style="display:
浏览 1提问于2013-03-07得票数 3
回答已采纳
我需要响应显示几个图像在一个块容器，我如何能够自动调整和填充整个容器与特定的颜色时，屏幕大小被缩小。下面是HTML和CSS的源代码，演示可以从查看，只有前几行是用背景色填充的，剩下的怎么填充。
<div id="container">Smile Smile
<ul>
<li>
<img src="http://3.bp.blogspot.com/-t9e7S8huhaQ/VBMVN6CbNGI/AAAAAAAAA14/02am46_jiJM/s1600/Big_smile.png&
浏览 4提问于2014-10-02得票数 0
回答已采纳
如何在bootstrap的上下文中显示在同一行的标签和div上。我确实尝试了以下代码，但它不起作用：
.control-group {
display: inline-block;
}
演示：
附言:我只想改变css规则，而不是dom。
浏览 1提问于2012-10-31得票数 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
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
