相关疑难解决方法(0)
CSS标签元素之间的CSS不需要的间距
我有这个样式表:
*{
padding: 0px;
margin: 0px;
}
a{
background:yellow;
}
和这个网页:
<a href="/blog/">Home</a>
<a href="/about/">About</a>
<a href="/contact/">Contact</a>
结果是:
如何让这些锚标签相互"接触",消除其间不需要的空间？
谢谢卢卡
27
推荐指数
推荐指数
3
解决办法
解决办法
3万
查看次数
查看次数
内联块元素的保证金崩溃？
块元素的边距会崩溃,但不会内联块.
有没有办法强制内联块边缘崩溃？
.wrapper {
position: relative;
float: left;
width: 100px;
margin: 10px;
}
.wrapper .el {
display: inline-block;
width: 100%;
height: 20px;
background: #000;
margin: 10px 0;
}
.wrapper.block .el { display: block; }<div class="wrapper">
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
</div>
<div class="wrapper block">
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
</div>有人有想法吗？
我已经阅读了有关MDN的文档.
26
推荐指数
推荐指数
1
解决办法
解决办法
9115
查看次数
查看次数
如何摆脱CSS水平列表项之间的空白？
我有以下测试页面和CSS.显示时,每个列表项之间有4px的间隙.如何让物品彼此相邻？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
</head>
<body>
<div>
<ul class="nav">
<li class="nav"><a class="nav" href="#">One1</a></li>
<li class="nav"><a class="nav" href="#">Two</a></li>
<li class="nav"><a class="nav" href="#">Three</a></li>
<li class="nav"><a class="nav" href="#">Four</a></li>
</ul>
</div>
</body>
</html>
css:
ul.nav, ul li.nav {
display: inline;
margin: 0px;
padding: 0px;
}
ul.nav {
list-style-type: none;
}
li.nav {
background-color: red;
}
a.nav {
background-color: green;
padding: 10px;
margin: 0px;
}
a:hover.nav {
background-color: gray;
}
25
推荐指数
推荐指数
4
解决办法
解决办法
3万
查看次数
查看次数
在CSS中指定与父DIV相关的精确百分比宽度
我正在尝试使用DIV元素和CSS创建一个可视元素,它应该以下面演示的格式显示数据.
[----- 50%----- | --25% - | --25% - ]
当使用我在下面指定的代码和CSS时,我的最后一个元素总是溢出到下一行,我指定的CSS百分比值似乎没有正确地创建布局.
任何人都可以建议一个更好的方法吗？
我的HTML
<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
25%</div>
<div class="vi-internal-element" style="width: 50%;">
50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
<li>
<div class="legend-blue">
</div>
Sales</li>
<li><span class="legend-tan"></span>Processed</li>
<li><span class="legend-grey"></span>Pending Processing</li>
</ul>
我的CSS
.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}
24
推荐指数
推荐指数
2
解决办法
解决办法
4万
查看次数
查看次数
为什么font-family会影响按钮之间的空间？
请仔细阅读问题.它与如何删除内联块元素之间的空间不同.
请考虑以下示例:
HTML:
body {
/* font-family: Arial; */
}
.my-class {
display: inline-block;
margin: 0 0 0 -4px;
background-color: transparent;
border: 1px solid #ccc;
padding: 20px;
}CSS:
<div>
<button class="my-class">Hello</button>
<button class="my-class">Stack</button>
<button class="my-class">Overflow</button>
</div>产生:
但是,如果我补充:
body {
font-family: Arial;
}
它导致第二个和第三个按钮之间的空间为1px:
现在的问题是:为什么增加font-family的body影响按键之间的空间？
20
推荐指数
推荐指数
4
解决办法
解决办法
1382
查看次数
查看次数
3个内嵌块div,正好宽度为33%,不适合父级
这是一个常见的问题,但我无法弄清楚它为什么会发生.
我有一个父div,在div里面我有3个div,宽度设置为33%(确切地说,不是33.3%!)和display: inline-block.
在Chrome中它运行良好,但在Mozilla和Opera中它没有(我还没有在IE中测试它).我认为问题可能出在算法浏览器用于从百分比计算像素大小的算法中.但是当我检查DOM指标时,我发现父亲的宽度是864px而孩子的宽度是285px(这是正确的:864*.33 = 285.12).但为什么它不适合父母呢？285*3 = 855,比父母的宽度小9px!
哦,是的,所有div的填充,边距和边框设置为0,DOM指标确认.
19
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
如果不适合,将整个跨度包裹在新行上
我有两个孩子div 20%和80%.最后一个包含嵌套的spans,如果文本不适合同一行,则它将在单行上移动到下一行(默认行为).
HTML:
<div class="post-short-footer">
<div class="read-more-post"></div>
<div class="post-short-meta-container">
<span class="posted-on"><i class="fa fa-calendar" aria-hidden="true">Some text</i></span>
<span class="cat-links"><i class="fa fa-folder-open-o" aria-hidden="true"></i>Some text</span>
<span class="comments-link"><i class="fa fa-comment-o" aria-hidden="true"></i></span>
</div>
</div>
CSS:
.post-short-footer {
display: table;
width: 100%;
}
.read-more-post {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 20%;
padding: 0.6em 0.6em;
border-radius: 0.3em;
text-align: center;
border: 1px solid #3b9be5;
}
.post-short-meta-container {
display: table-cell;
padding-left: 1em;
width: 80%;
line-height: 100%;
vertical-align: middle;
height: 100%;
}
但是如果跨度中的文本不适合行移动整个跨度到下一行,我需要实现下一个结果.
我已经尝试过:
.post-short-meta-container span { …18
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
CSS/HTML - 水平列表 - 删除列表项之间的神秘差距？
我正在制作菜单栏时遇到问题.似乎菜单项之间存在差距,对于我的生活,我不明白这是什么原因.
作为对下面的屏幕截图的描述,第一个链接(主页)是当前页面并且它被突出显示.当我的光标在这个项目上时,第二个链接(page1)是一个悬停效果.您会注意到这两个项目之间存在间隙(究竟是什么导致这个？!),它显示包含菜单的div的背景颜色.
值得注意的是,我使用的是最新版本的firefox.
这是我的问题的屏幕截图:
这是列表的html:
<div class="nav">
<ul>
<li class="selectedPage"><a href="#">HOME</a></li>
<li><a href="#">PAGE1</a></li>
<li><a href="#">PAGE2</a></li>
</ul>
<!-- end .nav --></div>
这是css:
div.nav {
width: 750px;
background: #52b5f0; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzUyYjVmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzM2OTlkMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iIzE5NjM4YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, #52b5f0 5%, #3699d0 49%, #19638a 95%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#52b5f0), color-stop(49%,#3699d0), color-stop(95%,#19638a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #52b5f0 5%,#3699d0 49%,#19638a 95%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #52b5f0 5%,#3699d0 …17
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
为什么"内联块"在这个CSS中不能正常工作？
请检查下面的CSS.
/*rex is the container of ex,ex2,ex3*/
div.rex{
height:200px;
border:0px;
margin:60px auto;
padding: 0;
vertical-align:top;
}
div.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
div.ex2{
width:0.5%;
height:200px;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
div.ex3{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
浏览器中的结果:
我需要的:
16
推荐指数
推荐指数
1
解决办法
解决办法
6万
查看次数
查看次数
如何在动态div中垂直对齐中间的按钮
我想使用bootstrap将div中的垂直对齐按钮居中
<div class="row" >
<div class="col-xs-2">
<button class="btn" style="color: #660066;">
<i class="fa fa-arrow-left" data-ng-click="onClickBack()" ></i>
</button>
</div>
<div class="col-xs-10">
<h4> {{rootNode.nodeName}}</h4>
</div>
</div>
如您所见,我有两列,一列包含左侧的按钮,另一列包含Label.当label.length增加时,div会改变高度 - >我希望按钮始终以div为中心.
user-interface html5 css3 twitter-bootstrap twitter-bootstrap-3
13
推荐指数
推荐指数
2
解决办法
解决办法
7万
查看次数
查看次数