小编dip*_*pas的帖子
如何在h2之后放置具有固定宽度的居中边框底部？
如何border-bottom在h2（根据文本可以更长或更短）之后以固定宽度（100px）居中放置？
代码
h2 {
position: relative;
z-index: 1;
text-align: center;
padding-bottom: 50px;
}
h2:after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 100px;
border-bottom: 2px solid magenta;
}<h2>Something</h2>我正在尝试执行以下操作
推荐指数
解决办法
查看次数
垂直对齐CSS属性是否有效？
W3School说:
当我们使用时
vertical-align:middle;元素被放置在父元素的中间
所以我试着这样做,但没有得到理想的结果
代码:
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
vertical-align: middle;
}
p {
vertical-align: middle;
}<div>
text
<p>
yo bro
</p>
</div>为什么我没有得到预期的结果？
推荐指数
解决办法
查看次数
如何在ul元素中单独悬停子节点？
HTMLul元素将子元素悬停在父元素上
ul li:hover {
background-color: pink;
}<ul>
<li>1
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>推荐指数
解决办法
查看次数
使用nth-child进行CSS编号
我有一个div和里面div有多个p标签.我需要使用css对它们进行编号.p标签的数量可能会有所不同.
使用:nth-child()和::before我可以做这样的事情
div p:first-child::before {
content: '1 '
}
div p:nth-child(2)::before {
content: '2 '
}
div p:nth-child(3)::before {
content: '3 '
}
div p:nth-child(4)::before {
content: '4 '
}
div p:nth-child(5)::before {
content: '5 '
}<div>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
</div>如果有大量元素,我该如何实现它.在css里面有没有任何关于子编号的方法:nth-child(),就像这样.
div p:nth-child(n)::before {
content: n
}
n子号码在哪里 .我知道编号可以使用list完成,但我需要知道是否有任何方法可以在css选择器中获取子num.
推荐指数
解决办法
查看次数
使父 div 内的子 div 等宽且流畅
我怎样才能让孩子3div与类.box具有相同的width，而流体占据整个父container div，而住inline。
这是一个小提琴
#container {
width: 20em;
background: red;
text-align: center;
}
.box {
display: inline-block;
margin: 1em;
border: 1px solid #000;
}<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>推荐指数
解决办法
查看次数
在javascript中用空格替换所有<br>标记
遇到非常简单的问题,如何正确地用空格替换所有< br>和<br>字符串？
这是我正在尝试使用的,但我收到的是相同的字符串:
var finalStr = replaceAll(replaceAll(scope.ItemsList[i].itemDescr.substring(0, 27), "<", " "), "br>", " ");
function replaceAll(str, find, replace) {
return str.replace(new RegExp(find, 'g'), replace);
}
推荐指数
解决办法
查看次数
如何在flexbox中的行之间均匀分布元素？
如果我有以下内容:
<div id="flex">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
假设flex-direction: row并且三个<div></div>元素适合一行,浏览器是否可以在每一行显示2行,两行,而不是在一行上显示3,然后在下一行显示1？
推荐指数
解决办法
查看次数
使用带有最大宽度的空白 nowrap
我想制作一些带有分隔线的自定义标题。最大宽度文本我设置为 40%，行分隔符显示在文本后面。主要思想是，如果文本少于 40%，则行从文本结束处开始，但如果文本大于 40%，则会换行。
不幸的是，如果我不使用white-space: nowrap;文本 - 分隔线会使我的文本崩溃，但当我使用时white-space: nowrap max-width: 40%则不起作用。我哪里错了？
更新。我只想当文本很大时 - 它填充所有最大宽度，并且分隔线从 40% 开始，但是当文本很小时 - 分隔线从文本末尾开始，而不是从 40% 开始。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- first example -->
<div class="addition-hr">
<table style="width: 100%; margin-bottom: 5px">
<tr style="width: 100%">
<td style="max-width: 40%; margin-top: 30px; margin-bottom: 30px; padding: 0 15px 0 15px; white-space: nowrap;">
<span style="position: relative"><b>Lorem ipsum dolor sit amet</b></span>
</td>
<td style="width: inherit; display: table-cell"> …推荐指数
解决办法
查看次数
如何在有序列表中组合数字和字母？
如何在 CSS 中使用数字和字母递增有序列表：
ol.nested {
margin-bottom: 0;
counter-reset: item;
}
ol.nested li {
display: block;
position: relative;
}
ol.nested li:before {
content: counters(item, ".", decimal) ".";
counter-increment: item;
position: absolute;
margin-right:100%;
right: 10px;
}<ol class="nested">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ol class="nested">
<li>Show Item 3.a instead of 3.1</li>
<li>Show Item 3.b instead of 3.2</li>
<li>Show Item 3.c instead of 3.3</li>
</ol>
</li>
<li>Item 4
<ol class="nested">
<li>Show Item 4.a instead of 4.1</li>
<li>Show Item 4.b instead of 4.2</li> …推荐指数
解决办法
查看次数
Visual Studio代码 - 从代码中删除空行
我使用Visual Studio Code作为我首选的文本编辑器,我遇到了关于格式化的问题.我已经从一个文件复制代码并粘贴到另一个文件中,但是当我粘贴代码时,VSC在每行代码之间放置了一个空行.
这是一个非常大的文件,所以我希望有一种方法可以一次识别所有空白行并删除它们？
这就是我希望代码看起来的样子:
<div>
<h1></h1>
<p></p>
</div>
但是,在粘贴它现在看起来像这样:
<div>
<h1></h1>
<p></p>
</div>
我已经在线查看,但一直无法找到任何直接答案:(
推荐指数
解决办法
查看次数
标签 统计
css ×8
html ×8
css-counter ×1
css3 ×1
flexbox ×1
html-lists ×1
html-table ×1
javascript ×1
pseudo-class ×1
regex ×1