相关疑难解决方法(0)
My inline-block elements are not lining up properly
All of the elements within .track-container should line up nice and in line, each side by side, constrained by the 200px height they've been given with no weird margins or padding. Instead, you have the strangeness that occurs in the aforementioned fiddle.
What is causing .album-artwork and .track-info to get pushed halfway down the page, and how can I fix it? Also, I acknowledge that a table may be a better way of approaching this whole setup, but I want …
推荐指数
解决办法
查看次数
溢出:隐藏+显示:内联块向上移动文本
我有以下HTML:
<div>
a<span style="overflow: hidden; display: inline-block;">b</span>c
</div>
我期待看到的:abc.
我看到的内容(在Chrome,Safari,Firefox中): 
b高于a和c.为什么会如此以及如何解决？
推荐指数
解决办法
查看次数
溢出:隐藏在内联块上会增加父级的高度
我确定以前曾以某种形式或其他方式询问过,但我找不到答案.
我有一些嵌套的div
<div class="parent">
<div class="child">A</div>
</div>
并且孩子有显示:内联块和溢出:隐藏
.parent{
background-color:red;
}
.child{
background-color:green;
display:inline-block;
overflow:hidden;
}
它会像这样呈现:
您可以注意到父母比孩子高5px.
额外高度来自哪里？
以下是示例:http://jsfiddle.net/w8dfU/
编辑: 我不想删除display:inline-block或overflow:hidden,这是一个简单的例子来说明问题,但在我的真实布局中我需要它们.我只是想明白为什么会出现这个额外的高度.是否指定它应该是这样的？这是其他一些css功能的结果吗？
推荐指数
解决办法
查看次数
为什么我的内联块div在没有对齐时只有其中一个有文本？
直播页面在这里.
鉴于此HTML页面:
section[role=main] {
margin: 1em;
width: 95%;
border: 1px solid #999;
}
section[role=main] article {
width: 40%;
height: 180px;
margin: 1em;
display: inline-block;
border: 1px solid black;
}<section role="main">
<article>Java</article>
<article></article>
</section>
<section role="main">
<article>Java</article>
<article>JavaScript</article>
</section>我希望我的两篇文章都是一致的,但正如我在下面的截图中看到的那样,只有当我的两篇文章都有文本时,这些<article>元素才是中心对齐的:
是什么导致了这种行为,以及如何解决？
推荐指数
解决办法
查看次数
为什么此内联块元素具有未垂直对齐的内容
遇到了一个奇怪的CSS问题.有人可以解释为什么有内容的盒子没有垂直对齐？
如果您将文本放在带有类的范围内.divPutTextToFixIssue- 它会正确对齐.
#divBottomHeader {
background-color: #d5dbe0;
height: 43px;
}
.divAccountPicker {
display: inline-block;
background: blue;
width: 200px;
height: 40px;
}
.divAccountData {
display: inline-block;
background: red;
width: 400px;
height: 40px;
}<div id="divBottomHeader">
<div class="divAccountPicker">
<span class="divPutTextToFixIssue"></span>
</div>
<div class="divAccountData">
<span>Balance: $555</span>
</div>
</div>推荐指数
解决办法
查看次数
CSS内联块问题 - 元素被推下
演示:http://jsfiddle.net/q4uNj/
所以这就是问题:我无法弄清楚为什么第二个div - class="other"被推倒了.
推荐指数
解决办法
查看次数
内联块div元素不按预期排列
我有一些HTML和CSS可以创建一个可能在目标网页上找到的内联块元素(div).但是,当它们在div中包含一些内容(无序列表)时,它们似乎只是正确地垂直对齐.如果div中没有内容,则元素会被推下.这是一个jsfiddle.这是代码.任何人都能解释为什么第三个div块没有垂直对齐吗？
编辑:虽然我觉得这个问题的"修复"是确保每个div在样式中使用"vertical-align:top",但我仍然有点疑惑为什么我需要使用它造型首先.我认为div元素将始终均匀排列,无论div内部的内容如何.
<html>
<head>
<style type="text/css">
body {
font-family: Helvetica;
}
h1 {
margin: 0px;
padding: 10px;
font-weight: bold;
border-bottom: 1px solid #aaaaaa;
font-size: 12px;
}
a {
text-decoration: none;
}
ul {
padding-left: 20px;
}
li {
list-style-type: none;
font-size: 12px;
}
.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
} …推荐指数
解决办法
查看次数
为什么带有`overflow:hidden`的`inline-block`元素的基线设置为其下边距？
读取两个伟大的答案解释的行为后inline-block元素(这是为什么inline-block的元素被推向下？和为什么跨度的行高也没用)我仍然有两个原因不明的问题.
1.将inline-block元素基线从其线框基线改为底边缘的原因是什么？
http://www.w3.org/TR/CSS2/visudet.html#leading
"内联块"的基线是正常流程中其最后一个线框的基线,除非它没有流入线框或者其"溢出"属性具有"可见"以外的计算值,在哪种情况下,基线是底部边缘边缘.
2.如何计算这种转变？
重要提示:我不要试图找到一个解决方案如何解决它.我试着理解inline-block在应用元素时改变元素定位行为的原因是什么overflow: hidden.所以,请不要发布傻瓜的答案.
UPDATE
不幸的是,虽然我接受了答案,但我没有得到我想要的东西.我认为问题本身存在问题.关于第一个问题:我想了解为什么inline-block不能保留其线框的基线,即使它有overflow:hidden(当然,尽管有W3C规范).我想听听设计决定 - 不仅仅是必须设置一些东西,因为它要求W3C.第二个:我想得到一个公式,我们可以粘贴font-size和line-height元素,并得到正确的结果.
无论如何感谢任何人:)
更新2
幸运的是,主观上找到了答案!看到第一个重新接受的答案.谢谢@pallxk!)
推荐指数
解决办法
查看次数
内联块div中的文本将其向下推
今天早上我发现了一个奇怪的CSS问题,我希望CSS专家可以帮助我.在这个演示中,为什么红色div中的文本会将其推下来？我预计这两个div会彼此相邻.谢谢!
编辑:谢谢大家的答案.我会稍微接受一个答案.任何人都可以解释为什么会这样吗？
推荐指数
解决办法
查看次数
溢出:隐藏; 在Firefox中导致对齐问题
我有一个布局,在基于Webkit的浏览器中渲染完美,但在Internet Explorer和firefox中垂直对齐关闭.最简单的代码示例是:
<html>
<head>
<style>
body {
padding: 20px;
background-color: #c0c0c0 ;
}
#wrapper {
border: 4px solid #9cf ;
}
#wrapper > div {
display: inline-block ;
height: 30px ;
line-height: 30px ;
}
#content1 {
width: 100px ;
background-color: yellow ;
}
#content2 {
width: 325px ;
overflow: hidden ;
white-space: nowrap ;
background-color: blue ;
}
#content3 {
width: 400px ;
background-color: red ;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content1">Content 1</div>
<div id="content2">A rather long …推荐指数
解决办法
查看次数