相关疑难解决方法(0)
内联块如何消除差距
我想显示两个div内联,一个div是25%,另一个是75%,当我使用时:
display: inline-block;
它似乎在两个div之间产生了差距,这显然会导致75%的分数下降.
如何消除差距？我用了:
vertical-align: top;
这已经消除了最大的差距...现在只需要边缘差距.
在这里看到jsfiddle.
推荐指数
解决办法
查看次数
100%宽度的容器,8个相同尺寸的输入
我有一个100%宽度的容器,我想填充8个相同大小的输入.100/8 = 12.5
html:
<div id="container">
<input class="form" />
<input class="form" />
....
</div>
我的css:
#container{
width: 100%;
background-color:red;
margin:0;
}
.form{
width:12.5%;
margin:0;
}
正如你在这个小提琴中看到的那样:https://jsfiddle.net/7z7e63cb/
最后一个输入显示在另一行中.为什么？我该如何解决？谢谢
推荐指数
解决办法
查看次数
div之间的空白，即使margin和padding设置为0
我试图建立一个CSS框架供我个人使用。
我之前在其他项目上曾遇到此问题，但设法通过更改代码来解决它。我不知道为什么会这样
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
*{
box-sizing:border-box;
}
.row{
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
}
.col-sm-1,.col-md-1,.col-lg-1{
margin:0;
padding:0;
display:inline-block;
width:4.16667%;
border:1px solid black;
} <div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div>
<div class="col-sm-1">
</div> …推荐指数
解决办法
查看次数
如何在文本更改时保持 div 宽度 50%？
我有两个divs包含width: 50%在容器中的文本内容。问题是当文本内容改变时，宽度也会改变：
我的容器的固定宽度等于200px：
.container {
display: block;
width: 200px;
}
.text1 {
background-color: red;
width: 50%;
display: inline;
}
.text2 {
background-color: blue;
width: 50%;
display: inline;
}<div class='container'>
<div class='text1'>Text1</div>
<div class='text2'>Text2</div>
</div>div即使文本发生变化，如何保持子宽度的 50% ？链接到JSFiddle：
推荐指数
解决办法
查看次数
LI 元素之间的 html 导航列表中 <!-- --> 的用途是什么？
我看到一个有趣的导航列表示例如下（省略了css），
<nav class="navigation">
<ul>
<li><a href="#">Profile</a></li><!--
--><li><a href="#">Settings</a></li><!--
--><li><a href="#">Notifications</a></li><!--
--><li><a href="#">Logout</a></li>
</ul>
</nav>
乍一看，我以为<!--and -->Between<li>标签可能是错误留下的。作者刚刚忘记清除评论了。
但当我把它们排除在外时，导航栏看起来就不一样了。看来是故意添加的。
由于我不是 HTML 专家，所以有人可以解释一下吗？这是常见的伎俩吗？
推荐指数
解决办法
查看次数
使用css删除html空格
这是css代码：
#div_0, #div_1 {
width: 100px;
height: 100px;
display: inline-block;
}
#div_0 {
background-color: #090;
}
#div_1 {
background-color: #900;
}
这是 HTMl
<div id="div_0"></div>
<div id="div_1"></div>
这显示为：http : //jsfiddle.net/7G63S/
如您所见，这里是 div 标签之间的香料，为了删除这个空间，我可以这样写 html：
<div id="div_0"></div><div id="div_1"></div>
问题解决：http : //jsfiddle.net/7yE2M/
但是有趣的是，如果html看起来像这样，如何用css删除div之间的空间：
<div id="div_0"></div>
<div id="div_1"></div>
?
或使这不可能？
PS white-space: nowrap在这种情况下没有帮助。
推荐指数
解决办法
查看次数
即使边距和填充为零,Div仍然有空格
我遇到了一个问题,我无法删除div之间的空格.我已经加入了我的标记和CSS以及一个小提琴:http://jsfiddle.net/kW5uW/12/
尽管设置了保证金并且padding为零,我仍然在div之间看到空格,我该如何删除它？我希望所有的盒子都紧挨着彼此.
CSS和标记:
.segment {
width: 20px;
height: 20px;
background: grey;
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
}
.container {
padding: 0px;
margin: 0px;
}<div class="container">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>任何意见,将不胜感激.谢谢.
推荐指数
解决办法
查看次数
如何删除导航中列表项之间的空格(HTML/CSS)
我在导航中删除li项目之间的空间时遇到了问题,我已经为项目和锚点(链接)设置了边距:0px,但空间/间隙仍然存在.
我该如何删除这些空格？
/* navigation styles */
nav {
background: rgba(6, 19, 72, 1);
background: linear-gradient(to bottom, rgba(6, 19, 72, 1) 0%, rgba(15, 31, 91, 1) 100%);
}
.nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav li {
display: inline;
margin: 0px;
}
nav ul.nav {
width: 1120px;
margin: 0 auto;
min-width: 120px;
}
span.homeicon {
width: 35px;
height: 32px;
display: inline-block;
vertical-align: middle;
position: relative;
background-image: url('http://s16.postimg.org/cq68hbikx/home_icon.png');
background-size: cover;
}
.nav a {
display: inline-block;
padding: …推荐指数
解决办法
查看次数
如何删除两个span标签之间的空白？
.side-bar{
background-color: red;
}
@media (min-width: 768px){
.side-bar{
z-index:10;
position:absalute;
width:220px;
/*padding-top:60px;*/
height:100%;
/*top:0;*/
position:fixed;
}
}
@media (min-width: 768px){
.top-left-part{
width:220px;
position:fixed;
z-index: 11;
/*top: 0;*/
height: 60px;
}
}
/*---------------top left part starts here------------*/
.top-left-part{
width:220px;
float:left;
background-color: #ffffff;
/*padding-top: 60px;*/
}
.top-left-image{
float: left;
height: 40px;
width: 50px;
padding-left: 1.3px;
padding-right: 10px;
padding-top: 2.7px;
}
.left-top-text{
display: inline-block;
padding-top:6px;
font-size: 30px;
white-space: nowrap;
/* word-spacing: -1px;
/* float: right;*/
/*margin-left: 10px;*/
}
.text-elite{
font-weight: 600;
}
.text-admin{ …推荐指数
解决办法
查看次数
垂直居中对齐未知高度的div
我正在尝试解决vertical-align涉及浮动div 的问题.所有高度都是未知的 - 因为它们只是用内部文本行隐式形成.
这是代码:https://jsfiddle.net/zjzyryae/
#test {
background: yellow;
display: inline-block;
}
#block1 {
float: left;
display: inline-block;
background-color: grey;
}
#block2 {
background-color: green;
float: left;
}<div id="test">
<div id="block1">
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
</div>
<div id="block2">
sample
</div>
</div>我需要垂直居中"block2"div - 当然只有CSS(没有JavaScript).
看到"block1"div隐式设置父"test"块高度 - 这使得与所描述的类似情况(其中此高度以像素显式设置)的主要区别.
也许这个问题在某个地方得到了解决,但我没有找到完全相同的情况.我考虑的类似例子是不同的.
这个中心垂直未知高度文本中未知高度div实际上包括硬编码高度设置 - 这与我的情况大不相同.
那一个如何垂直中间对齐未知高度的浮动元素？也是不同的情况,不适合我的情况 - 因为父高度等于浮动divs高度(这比我的情况容易得多).
我试着玩不同的display:table设置 - 但仍然没有运气.
推荐指数
解决办法
查看次数
元素之间的 4px 间隙是怎么回事？
在某些设置中，默认情况下元素之间似乎有 4px 间隙（参见示例），为什么它甚至存在？我怀疑如果修复的话会不会有什么不好的影响。
使用 flex-box 可以解决这个问题，但我仍然不知道它为什么存在，以及它是在加载时生成还是使用 JavaScript 创建的元素之间的区别。
for(var i = 0; i < 8; i++) {
$(".js").append('<div class="box"></div>');
}body {
font-family: sans-serif;
}
body > div {
width: 440px;
padding: 10px;
background-color: #eee;
}
body > div .box {
width: 100px;
height: 100px;
background-color: #000;
margin: 0px;
box-shadow:inset 0 0 0 1px #000,inset 0 0 12px 0 #fff;
}
body > div.inline-block .box {
display: inline-block;
}
body > div.inline .box {
display: inline;
}
body > div.flex-wrap …推荐指数
解决办法
查看次数