我创建了两个div; 一个display:inline-grid有财产,另一个display:grid有财产.我想将背景颜色应用于两个div的子元素,但具有display:inline-grid属性的div 不会对其元素着色.
HTML和CSS代码
#inline {
display: inline-grid;
}
#block {
display: grid;
}
div div {
height: 50px;
}
div div:nth-child(1n) {
background-color: green;
}
div div:nth-child(2n) {
background-color: rebeccapurple;
}
div div:nth-child(3n) {
background-color: aquamarine;
}Run Code Online (Sandbox Code Playgroud)
<body>
<div id="inline">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="block">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>Run Code Online (Sandbox Code Playgroud)
如何为内联网格div中的div设置颜色?
我正在 bootstrap 4 中创建一个下拉菜单。我将下拉切换按钮和下拉菜单放置在class="container" 的 div 元素中,我希望下拉切换和下拉菜单占据其父元素的全宽。我为此编写了这段代码
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<body>
<div class="container">
<button class="dropdown-toggle btn-block" data-toggle="dropdown">
dropdown
</button>
<div class="dropdown-menu">
<a href="" class="dropdown-item">one</a>
<a href="" class="dropdown-item">two</a>
<a href="" class="dropdown-item">three</a>
<a href="" class="dropdown-item">four</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>Run Code Online (Sandbox Code Playgroud)
下拉切换按钮占据其父 div 的整个宽度。但是,当我单击下拉切换按钮时,我发现下拉菜单没有占据全宽。我希望下拉菜单的宽度等于它的父宽度,我该怎么做?(我尝试使用 width:inherit; 属性,但效果不佳)
事件仅在第一次单击按钮时触发。
<button id="b">huerig</button>
<script>
y = function(evt) {
document.body.innerHTML += evt.type;
}
b = document.querySelector("#b");
b.addEventListener("click", y);
</script>Run Code Online (Sandbox Code Playgroud)
console.log(document.getElementsByTagName('html')['0'].textContent);
console.log(document.getElementsByTagName('html')['0'].innerText);Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>innnerHtml of paragraph</p>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
textContent属性打印html元素中除标签之外的所有文本内容.它还可以打印所有空白区域和新线条.因此,为了获得没有空格和新行的文本,我使用了innerText属性,但它没有在title元素中打印文本,只是在p元素中打印了文本.为什么innerText属性不像我预期的那样工作?
我在这里写了一个小JS代码.哪个运行没有任何错误
repeat:
while(true){
console.log('Start');
break repeat;
console.log('End');
}Run Code Online (Sandbox Code Playgroud)
但是当我不使用while语句时,程序会抛出错误 Undefined label repeat
repeat:
console.log('Start');
break repeat;
console.log('End');Run Code Online (Sandbox Code Playgroud)
为什么程序会抛出该错误?标签只用于循环吗?
html ×4
javascript ×3
css ×2
ecmascript-5 ×2
ecmascript-6 ×2
bootstrap-4 ×1
css-grid ×1
css3 ×1