小编نور*_*نور的帖子
浏览器如何重构无效的html结构，有什么规律或方法吗？
笔记：
答案会是这样的..是的..有规则和方法..这取决于收养机构的算法等。你可以按照这些（链接）等和你的简短描述。我不是在寻找任何算法或更多..
例如，如果一个a标签嵌套一个a 标签。chrome 浏览器重组 html 。类似的button标签。两者都是无效的 html 结构
我知道a和button标签都是交互元素。交互元素（a、按钮、输入等）与用户的活动相关。
从评论：
这个问题太宽泛了。
- 仅回答以下示例代码或场景。
我认为每个浏览器都应该从某个地方以相同的方式工作......这意味着应该遵循一些基本规则或方法。如果有人发现类似的东西，请提及。
为什么我要找这个？
当我为客户工作时。我发现许多无效的 html 结构。多种类型的html结构。有时我需要重新设计无效的 html 结构。我想我需要了解浏览器重构的概念以进行进一步的 Web 开发。
let aTag = document.querySelectorAll('a')
let buttonTag = document.querySelectorAll('button')
console.log('===a tag===')
aTag.forEach(function(item){
console.log(item)
})
console.log('===button tag===')
buttonTag.forEach(function(item){
console.log(item)
}) .card{
display: flex;
flex-direction: column;
padding: 10px;
border: 1px solid slateblue;
width: 200px;
text-align: center;
}<a href="" class="parent a-tag">
<div class="card">
<h4>Title</h4>
<p>Paragraph</p>
<button>Add to …推荐指数
解决办法
查看次数
css网格的垂直间距问题
注意 div.text前两个 div 总是顶部（第二个 div 也将是粘性 div），其他 div 将从底部动态添加js insertAdjacentHTML()
我在两个div.text垂直方向之间有一个额外的空间
有没有可能解决的方法css grid？
最后结果
*{
box-sizing: border-box;
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2,1fr) ;
grid-gap: 1px;
background-color: #f7ca18;
padding: 10px;
color:#000;
height:300px;
}
.grid-container > div.item {
display: grid;
grid-template-columns: 1fr ;
grid-template-rows: auto;
background-color: #f4d03f;
text-align: center;
font-size: 14px;
overflow-y:auto;
overflow-x:hidden;
}
.grid-container > div.item div.text {
align-self: end;
display:grid;
grid-template-columns: 1fr max-content ;
}
.grid-container …推荐指数
解决办法
查看次数
为什么js最接近的方法找不到兄弟元素？
注意：据我所知，该closest()方法在 DOM 树中搜索与指定 CSS 选择器匹配的最近元素。
当我点击margin两个li元素之间的空间..它返回null...但是如果我替换margin-bottom: 15px;为padding-bottom...一切都好...
CSS代码
.amenities-filters-inner ul li{
margin-bottom: 15px;
}
如果我单击红色标记区域，则图像..找不到兄弟li元素..
示例代码
.amenities-filters-inner ul li{
margin-bottom: 15px;
}
document.querySelectorAll(".amenities-filters-inner ").forEach(function(item){
item.addEventListener("click",function(e){
e.preventDefault();
let element = null;
element = e.target.closest(".amenity_id");
// element = e.target.querySelector(".amenity_id");
element = element.children[0].children[1];
element.checked == true ? element.checked = false : element.checked =true;
let dataId = + element.getAttribute('data-id');
console.log(element)
console.log(dataId)
})
}) .amenities-filters-inner{
border: 2px dashed royalblue;
max-width: 300px; …推荐指数
解决办法
查看次数
Laravel 和 htaccess 的重定向 Url 问题
我在本地 xampp 中为我的项目创建虚拟主机。网址： http: //kooltech-us.com/
我在公共文件夹（Laravel）中有文件夹名称 admin （如下图所示）。
在我的项目中我的管理员登录网址 http://localhost/admin/login。
我点击 urlhttp://localhost/admin/login进入管理员登录页面.. 没关系.. 但是当我点击这个http://localhost/admin.. 它带我到 public/admin 文件夹。这意味着向我显示公共目录列表。
为了防止访问目录列表或 public/admin，我在 .htaccess 文件中写入Options - Indexes代码。一般来说，它会给我 403 错误（禁止访问！）。是工作。
我正在寻找当我点击网址时http://localhost/admin它会带我去的 http://localhost/admin/login。
笔记：
- 我没有更改文件夹结构。（Laravel 默认文件夹结构存在）。
- 我在 .htacees 文件中只写了一行代码：
Options - Indexes。一般来说，这会给我 403 错误（禁止访问！）。 - 版本“laravel/framework”：“5.8.*”
我在 web.php 中编写但它不起作用..
Route::get('/admin', function () {
return redirect('/admin/login');
});
如果需要更多解释请评论..
推荐指数
解决办法
查看次数
grid-row: 1 / -1 实际上是如何工作的？（需要参考资料）
一般来说，我习惯于引导前端设计。大约半年以来，我一直在使用 css 网格布局。我没有像以前那样遇到任何问题或者我不这么认为
我读了一些文章来了解 grid-row: 1 / -1 到底是如何工作的或者它的行为..也许我会跳过它...也许这是一个坏问题或者已经在这里回答了
.grid-container > div.item span { grid-row: 1 / -1 ; not working }不工作...
笔记：
- grid-row: 1 / span number.. 不能解决问题。（段落标签数量未定义）。
- 如果我写 grid-row: 1 / 99999 .. 更高的数字。它会解决我的问题..也许这是不好的做法...
- 网格行：1 / -1。不工作...
需要对其行为的清晰解释或可靠的源文档
.grid-container {
display: grid;
grid-template-columns: repeat(2,1fr) ;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
animation: mymove 5s infinite;
}
.grid-container > div.item {
display: grid;
grid-template-columns: max-content 1fr ;
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: …推荐指数
解决办法
查看次数
在页面上的切换选项卡和重新加载时维护动态 CSS
在我的应用程序中，用户可以选择单击按钮来更改页面的 CSS。如果用户访问页面上的另一个链接或重新加载页面，我希望所选样式应保留，即用户不必一次又一次地选择样式/主题。
我怎样才能做到这一点？
function switch_style (style){
if(theme == "blue"){
document.getElementById("test").setAttribute('style','color:blue');
}
else if(theme == "black"){
document.getElementById("test").setAttribute('style','color:black');
}
}
<button type="button" class="btn btn-dark" onclick="switch_style('blue') id="blue">Blue</button>
<button type="button" class="btn btn-dark" onclick="switch_style('black')id="black">Black</button>
<p id="test">SAMPLE TEXT</p>
推荐指数
解决办法
查看次数
bootstrap 5滑块间隔无法正常工作
bootstrap 5滑块：我手动设置 interval: 1000毫秒，但第一张幻灯片需要超过1000毫秒，然后其他幻灯片迭代好..并且每次迭代结束第一张幻灯片延迟超过1000毫秒。
我该如何解决这个问题？ 有人可以帮我解决吗..提前致谢
下面的代码
var myCarousel = document.querySelector('#carouselExampleDark')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 1000,
})<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner" style="height: 300px;">
<div class="carousel-item active" data-bs-interval="10000">
<img src="https://picsum.photos/seed/picsum/200/300" class="d-block w-100" alt="...">
<div class="carousel-caption d-md-block">
<h5>First slide …推荐指数
解决办法
查看次数