相关疑难解决方法(0)
为什么使用display时div之间的空格:inline-block
使用时为什么div之间有空格display: inline-block,如下例所示:http://jsbin.com/IhULuZO/1/edit.
我知道我可以使用float:left,但如果可能的话,我想摆脱没有浮动元素的空白区域.
推荐指数
解决办法
查看次数
为什么要使用display:inline-block？
推荐指数
解决办法
查看次数
一个列表,简单浮动,不同的单元格大小
我对你有很好的挑战.这里有下一个代码(实例:http://inturnets.com/test/test.html):
<!DOCTYPE html><html><head><title></title>
<style type="text/css">* {
margin: 0;
padding: 0;}a, a:hover {
text-decoration: none;
}
.grid {
width: 984px;
margin: 0 auto;
list-style: none;
height: 666px;
}
.grid li {
float: left;
position: relative;
}
.small + .small {
position: relative;
clear: left;
}
.large, .large a {
width: 393px;
height: 222px;
}
.small, .small a {
width: 198px;
height: 111px;
}
.small a, .large a {
display: block;
cursor: pointer;
color: #fff;
}
.overlay { …推荐指数
解决办法
查看次数
为什么我的李元素之间有空间？
我有一个水平显示的项目列表.我想在每个li周围创建一个边框,让它们紧挨着彼此.
我创建了一个小测试来说明问题,如下所示:
<ul class="dashboard_inline_links">
<li><a href="#">October - 0</a></li>
<li><a href="#">November - 0</a></li>
<li><a href="#">December - 765</a></li>
<li><a href="#">January - 0</a></li>
<li><a href="#">February - 756</a></li>
<li><a href="#">March - 2</a></li>
</ul>
.dashboard_inline_links li {
border-style: solid;
border-width: 1px;
display: inline;
padding: 4px 8px;
}
.dashboard_inline_links a {
border-color: transparent #C6D3F0;
border-style: solid;
border-width: 1px;
color: #28478E;
display: inline-block;
margin: 0;
padding: 0;
}
简而言之 - 列表项之间存在空格.我希望它们彼此相邻,现在我只能通过在li项目上设置margin-left = -3px来实现这一点.
知道发生了什么事吗？我觉得我错过了一些明显的东西!
推荐指数
解决办法
查看次数
`display:inline-block`-elements上的奇怪边距
我在一条线上有6 DIV秒display:inline-block.但是他们之间有一个奇怪的白色空间,我怎么能摆脱它呢？它们应该在容器中装入一行.
小提琴:http://jsfiddle.net/y7L7q/
HTML:
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS:
#container{
width:300px;
border:1px solid black;
}
.box{
display:inline-block;
height:50px;
width:50px;
background-color:black;
margin:0;
padding:0;
}
推荐指数
解决办法
查看次数
为什么我的内容对于容器来说太宽了？
所有的宽度和边距都达到了99.96%,因此在100%时它应该很合适.我知道边框增加了宽度,所以我已经完成了,box-sizing: border-box;但似乎没有解决它.如果我float: left那么它在Chrome中运行正常,但我觉得这是一个糟糕的解决方法,并且实际上并没有解决问题.
为什么它不适合一条线？
HTML
<div id="container">
<a href="#">
1
</a>
<a href="#">
2
</a>
<a href="#">
3
</a>
<a href="#">
4
</a>
</div>
CSS
body {
border: 1px solid black;
background-color: #BCCDDC;
margin: 5% 25%
}
#container a {
font-family: 'Open Sans', sans-serif;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 2px solid #fff;
display: inline-block;
width: 15%;
margin: 0 6.66%;
padding: 20px 0;
}
#container a:first-of-type {
margin-left: 0 !important;;
}
#container …推荐指数
解决办法
查看次数
CSS表:如何将动作按钮放在每行左侧
我有这个默认的响应式Bootstrap表:
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
如何div在每行的右侧添加一个或容器,显示一些操作按钮,如删除行,更新图标等？它们应该默认隐藏.当我将鼠标悬停在一行上时,它应该显示在该行的右侧.不在表格内,但顶部和底部应与给定表格行的位置和高度对齐.
我怎么解决这个问题？如果不能单独使用CSS,使用jQuery/JavaScript或类似的解决方案可能没问题.
推荐指数
解决办法
查看次数
为什么两个边界框的50％div不并排？
我知道许多用于并排放置div的技术。但是我从来不明白为什么要采用两个宽度的边框框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;
}
.half {
width: 50%;
}<div class="half left"></div>
<div class="half right"></div>我想念什么？
编辑：
正如许多人指出的那样，display: block这不会给我带来并行的行为。这是错误的类型。我本来打算做的一切inline-block
推荐指数
解决办法
查看次数
10个div连续10%
这看起来很简单.我试图在父div中获得10个div,所有10%宽.父div为960px,并以页边距为中心,边距为:0 auto,背景为红色.如果我使用.tenPercent 10%或96px并不重要.结果是相同的,只有9个适合和第10个包装.看起来有一个左边距(或填充可能),但是会导致这种情况？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.tenPercent
{
color:Black;
display:inline-block;
border:1px solid black;
width:10%;
}
</style>
</head>
<body>
<div style="width:960px;background-color:Red;margin:0 auto">
<div class="tenPercent">1</div>
<div class="tenPercent">2</div>
<div class="tenPercent">3</div>
<div class="tenPercent">4</div>
<div class="tenPercent">5</div>
<div class="tenPercent">6</div>
<div class="tenPercent">7</div>
<div class="tenPercent">8</div>
<div class="tenPercent">9</div>
<div class="tenPercent">10</div>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
多个内联div超过容器宽度
如果它们的宽度超过容器宽度,我无法弄清楚如何保持多个div内联.如果所有div的宽度大约是1000 px而容器的宽度是500,我希望div与容器重叠,并且水平滚动酒吧出现.
#container {
overflow: hidden;
background: red;
width: 500px;
height: 500px;
}
#container>div {
border: 1px solid #000;
width: 30%;
height: 100px;
margin: 10px;
float: left;
}<div id="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<br style="clear: both;">
</div>小提琴:点击
推荐指数
解决办法
查看次数