是
border-collapse:collapse;
Run Code Online (Sandbox Code Playgroud)
和
border-spacing: 0px; /* only active/useful with option "separate" */
border-collapse:separate;
Run Code Online (Sandbox Code Playgroud)
相同?
我有一个div完整的图像:
.species {
background-color: lightblue;
margin-top: 20px;
display: inline-block;
}
.animals {
display: inline;
margin: 0;
margin-right: 25px;
margin-top: 5px;
}
.animal {
width: 25px;
padding: 8px 2px 0 2px;
display: inline;
}Run Code Online (Sandbox Code Playgroud)
<div class="species">
<div class="animals">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<img class="animal" src="ant.png">
<!-- imagine about 30 more ants -->
</div>
</div>Run Code Online (Sandbox Code Playgroud)
由于我的内容很受限600px,.animals包含蚂蚁包的div()包括:
但我希望它像a一样包裹<span>,以最后一只蚂蚁结尾,就像这样(在照片编辑器中创建):
但是,如果我给父级<div>内联显示或将其更改为a …
我有一个链接,它有一个mailto链接,我在超链接本身指定主题和正文.因此,当用户单击超链接时,将打开其默认电子邮件客户端应用程序,其中预先填充了"收件人","主题"和正文.
我想知道如何在body文本中应用css格式化技术,如font名称font color等.
任何人都可以对此有任何想法吗?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Unauthorized access</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<!-- font Awesome -->
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
</head>
<body class="skin-blue">
<!-- header logo: style can be found in header.less -->
<div>
<!-- Right side column. Contains the navbar and content of the page -->
<aside class="right-side" style="margin-left:0">
<section class="content">
<div …Run Code Online (Sandbox Code Playgroud)我正在使用Bootstrap 3.我有5个不同的labels,我想将它们设置width为最大值并使文本居中.
例如,每个label人width应该等于红色.
<span class="label label-md label-danger">Merkez Taraf?ndan Reddedildi</span>
Run Code Online (Sandbox Code Playgroud) 小提琴(它是我实际代码的骨架):http://jsfiddle.net/nkipe/6bhee8c8/
代码:
CSS
*
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0; padding: 0;
}
html
{
height: 100%;
}
body
{
height: 100%;
background: #FEFFFB;
font-family: arial, verdana;
}
#layoutContainer
{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
}
#iframeHeader
{
width: 100%;
height: 50px;
border: 0;
}
#iframeStatusBar
{
width: 100%;
height: 15px;
border: 0;
}
#iframeMainMenu
{
width: 200px;
height: 100%;
}
#iframeCenterContent
{
width: 100%;
height: 100%;
top: 65px; …Run Code Online (Sandbox Code Playgroud) 我试图将加号在圆内垂直和水平居中。我尝试过使用line-height,但这似乎不起作用:
代码
.circle {
font-size: 3.27rem;
font-weight: 400;
width: 94px;
border-radius: 50%;
color: white;
line-height: 94px;
text-align: center;
padding: 0;
height: 94px;
margin: 0 auto;
box-shadow: 0px 2px 5px rgba(94, 94, 94, 0.68);
cursor: pointer;
background: #fcce00;
position: absolute;
right: 50px;
z-index: 10;
span {
line-height: 94px;
}
}Run Code Online (Sandbox Code Playgroud)
<div class="circle">
<span>+</span>
</div>Run Code Online (Sandbox Code Playgroud)
是否有任何证据表明特定尺寸单位需要更长时间来处理?例如,如果您要调整rem整个网站的大小,是否会比给所有内容都指定一个特定px值需要更长的时间来计算/绘制页面?
max-width: 16rem超过有什么好处max-width: 250px吗?
我的印象是rem需要更长的时间,因为它必须恢复到根并计算 whileem就像一个稳定的处理流,并且px是最快的,因为没有什么可计算的。
请让我知道是否有人有任何证据表明哪种方法更快
我有一个table使用的ng-repeat.
当用户选择表格行时,我可以申请突出显示该table行并应用特定的类.
问题是我在更改图标时遇到问题row,突出显示的行background-color也是blue,文本更改为white但图标保持蓝色.
CSS
.selected{
background-color:#004b89;
color:white;
font-weight:bold;
}
Run Code Online (Sandbox Code Playgroud)
HTML
<tr ng-repeat="item in vm.items ng-class="{'selected':$index == vm.selectedRow}" class="table-striped" ng-click="vm.setClickedRow($index)">
<td><a tooltip-placement="top"><i class="fa fa-pencil fa-2x link-icon"></i> </a>
<td><a tooltip-placement="top"><i class="fa fa-trash fa-2x link-icon"></i></a>
</tr>
Run Code Online (Sandbox Code Playgroud) 可以在calc表达式中使用n变量吗?
例如:
.child:nth-child(n) {
margin-left: calc(n * 46px);
}
Run Code Online (Sandbox Code Playgroud)
我的代码:
<div class="share-buttons">
<div class="share-button-main"></div>
<div class="share-button share-facebook">
<img src="facebook.png" alt="" />
</div>
<div class="share-button share-whatsapp">
<img src="whatsapp.png" alt="" />
</div>
<div class="share-button share-email">
<img src="email.png" alt="" />
</div>
<div class="share-button share-sms">
<img src="sms.png" alt="" />
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS(Sass):
.share-buttons {
position: relative;
display: flex;
.share-button-main {
width: 46px;
height: 46px;
z-index: 2;
cursor: pointer;
content: url('share-menu-share-closed.png')
}
.share-button {
position: absolute;
top: 0;
left: 0;
width: 46px;
height: 46px;
z-index: …Run Code Online (Sandbox Code Playgroud) 我试图用它calc来固定我的宽度th:last-child与其他宽度相差15px.我所做的是:
th:last-child {
width: calc( (100% - 30px)/12 + 30px );
}
table, tr {
width:100%;
border: 1px solid black;
height:10px;
}
th {
border-right: 1px solid black;
width: calc( (100% - 30px)/12 );
}Run Code Online (Sandbox Code Playgroud)
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 2</td>
<td>Row 3</td>
<td>Row 4</td>
<td>Row 5</td> …Run Code Online (Sandbox Code Playgroud)