我正在制作两个单独的表单，并希望它们都链接到同一个按钮。在 HTML5 中，只需一个 ID 即可将提交按钮链接到表单之外。有没有办法将类或至少相同的 ID 添加到父按钮？
编辑：我没有提交任何数据，只是验证复选框是否被选中。如果某人试图通过单击提交按钮进入下一页，他们必须先勾选所有复选框。我正在处理需要单击的免责声明，仅此而已。
主要父按钮
<button form="checkedTrue" type="submit">Submit example</button>
表格1：
<form id= 'checkedTrue'>
Checkbox: <input type='checkbox' id='myCheck' name='test' required>
</form>
形式 2：
<form id= 'checkedTrue'>
Checkbox: <input type='checkbox' id='myCheck2' name='test2' required>
</form>
我正在尝试制作一个包含 3 幅图像的页面，每幅图像位于一个 div 内，但是应用 box-shadow 时下面会出现间隙。
<style>
body {
margin: 0;
}
.img img {
width: 300px;
height: 300px;
}
.contenedor {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.tarjeta {
margin: 20px;
position: relative;
box-shadow: 0px 0px 10px 10px gray;
}
.cuerpo {
position: absolute;
top: 0;
}
</style>
<body>
<div class="contenedor">
<div class="tarjeta">
<div class="img">
<img src="img/image1.jpg" alt="">
</div>
<div class="cuerpo">
<div class="texto">
<h3>Juanita</h3>
<p>Modelo: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, nihil.</p>
</div>
</div>
</div>
我想将 box-shadow 效果应用于每个 div，而不在下方留下间隙。我尝试将 height: 100% 应用于图像，以便它们占据整个 div 的高度，但不起作用。此问题仅在应用 box-shadow 时出现；如果我删除该效果，该间隙就会消失。我还尝试调整边距、填充和 box-sizing 属性，但似乎都无法解决问题。我正在寻找一种解决方案，使我能够应用 box-shadow 效果，而不会在 div 之间产生任何不必要的间隙。
我已阅读文档并在 Google 上搜索过 - 找不到答案。我有一个视差引导幻灯片。在第一张幻灯片中，我试图让 3 个 div 列的高度和宽度相等，并排排列在一行中。代码如下。但是，渲染时，每列都堆叠在一起，因此基本上只有 1 列。请帮忙？
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper">
<div class="parallax-bg" style="
background-image: url(https:// domain .com/assets/img/moonscape.jpg);
" data-swiper-parallax="-23%"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-300">Slide 1</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-100">
<div class="container">
<div class="row">
<div class="col-sm-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
tincidunt ut libero. Aenean feugiat non eros quis feugiat.
</p>
</div>
<div class="col-sm-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
tincidunt ut libero. Aenean feugiat non eros quis feugiat.
</p>
</div>
<div class="col-sm-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
tincidunt ut libero. Aenean feugiat non eros quis feugiat.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-300">Slide 2</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
tincidunt ut libero. Aenean feugiat non eros quis feugiat.
</p>
</div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-300">Slide 3</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
tincidunt ut libero. Aenean feugiat non eros quis feugiat.
</p>
</div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-300">Slide 4</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
tincidunt ut libero. Aenean feugiat non eros quis feugiat.
</p>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
基本上，我唯一剩下的问题就是标题旁边的行的高度自动调整。我用 div flex 包含了垂直线和标题，但我不确定结构本身是否正确或是否是我情况的理想解决方案。
这是我所做的：
.post-title {
font-weight: 700;
}
.vertical-line {
height: /* (Main Issue Here) */;
width: 10px;
background-color: #007bff;
margin-right: 1rem;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="post-title-container d-flex align-items-center">
<div class="vertical-line"></div>
<h1 class="post-title">
Lorem ipsum dolor sit amet consectetur adipisicing
</h1>
</div>
我对 React.JS 还很陌生，正在努力理解它。所以我的目的是这样的。根据单击的按钮在两个不同的应用程序（计数器和随机）之间切换。
我只是想根据单击的按钮在两个不同的 DIV 之间切换
计数器.JS
import { useState } from "react"
import './index.css';
function Counter(){
var [count,setmyname] = useState(0);
function Increment(){
setmyname(count = count+1);
console.log(count)
}
function Decrement(){
setmyname(count = count-1);
console.log(count)
}
function Reset(){
setmyname(count = 0);
console.log(count)
}
return(
<div className="center">
<div className="counter_app">
<h1>Counter App</h1>
<h1 className="count">{count}</h1>
<div className="button_class">
<button className="increment" onClick={Increment}>Increment</button>
<button className="decrement" onClick={Decrement}>Decrement</button>
<button className="reset" onClick={Reset}>Reset</button>
</div>
</div>
</div>
)
}
export default Counter`
随机.JS
function Random(){
var [number,SetRandom] = useState(0);
function GetRandom(){
SetRandom(Math.floor(Math.random() *10));
console.log(number);
}
return(
<div className="random_center">
<div className="random_app">
<h1>Random App</h1>
<button className="random" onClick={GetRandom}>Random</button>
<p>{number}</p>
</div>
</div>
)
}
export default Random
应用.JS
import Counter from "./counter"
import { useState } from "react"
import Random from "./random"
import ReactDOM from "react-dom/client"
function App(){
var [button,SetButton] = useState(1);
function GetDiv(){
}
return(
<div className="container">
<button onClick={}>Counter App</button>
<button onClick={}>Random App</button>
</div>
)
}
export default App
索引.JS
const root=ReactDOM.createRoot(document.getElementById("root"));
root.render(<App></App>
);
我添加了四个 JS 文件用于在按钮之间切换。我相信可能有更好的方法来做到这一点。我不确定如何在 React.JS 中进行 DOM 操作。让我知道如何做。非常感谢。
我希望文本（在本例中位于 内<h1>）具有彩色背景，其中左右边界是倾斜的。像这样：
我知道我应该通过设置类似这样的背景来实现这一点linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);（我在本例中使用了它），但我无法正确设置左右边界。我认为问题在于我需要设置渐变的起始值和终止值（本例中为 5% 和 95%），但这意味着根据文本的长度，过渡是“某处”。
h1 span {
background: linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);
padding-left: 0.8rem;
margin-right: 1rem;
}<h1> <span> This is a title </span> </h1>请注意，我必须手动进行调整padding-left并margin-right以某种方式使其看起来还可以（即使“标题”右侧有太多空间？）。
如果我把文本弄长，同样的 CSS 会产生如下效果：
这可能是因为<span>的宽度的 5% 和 95% 现在位于不同的位置，对吗？
我想要的解决方案是：
linear-gradient我尝试设置“到0.001%”或“某物”的边界99.999%，但这实际上消除了倾斜的边框：
GitHub 页面 https://chryspenalber.github.io/hercules/
存储库： https ：//github.com/chryspenalber/hercules
我通过 css 插入的图像未显示在 github 页面中，但在 localhost 中显示。我做错了什么？
我看了一些关于它的文章，包括区分大小写，但都不起作用。我做了其他显示的项目，我不明白我在这个项目上做了什么不同。
这只是一个例子，但它发生在所有图像上。
<div class="img-overlay"></div>
<div id="topo">
<a href="#">
<img src="assets/images/chevron-double-up-white.svg" alt="">
</a>
</div>
.img-overlay {
position: absolute;
top: -300px;
left: 0;
width: 100%;
height: 2400px;
background: linear-gradient(to bottom, transparent 70%, var(--bg-color) 100%), url(/assets/images/bg-hercules.jpg) no-repeat top center / cover;
opacity: 1;
z-index: -1;
}
在我的 html 页面中，我有一个按钮，里面有两个 div。上面的 div 包含菜单图标 svg，下面的 div 包含按钮文本。必须使用 div 将图标和文本放置在所需位置。
当鼠标悬停在按钮上时，我希望同时：
目前，我有如下的 CSS 定义，当鼠标悬停在按钮上时，以及当鼠标悬停在第一个 div（svg）上时，它们可以独立起作用。
当我为整个按钮定义一个过滤器时，鼠标悬停在按钮上时，文本和图像颜色会同时改变，图像背景颜色也会被过滤。当然这是不想要的。
仅使用 css 就能实现我的目标吗？
我的html标记：
<button class="icon-button" @onclick="@(() => { Connect_to_MAE();})">
<div><img class="svg_icon" src="images/abc.svg" width="36" height="36"></div>
<div>Connect</div>
</button>
我的CSS：
.icon-button:hover {
color: cornflowerblue; /* changes text color */
}
.svg_icon:hover {
filter: sepia(100%) hue-rotate(190deg) saturate(500%); /* changes just icon color */
}
我正在使用 Angular，想更改<input type="color">元素的默认颜色。目前，它默认显示黑色 (#000)，但我想将其设置为其他颜色。我该如何实现？
另外，我正在使用 Angular v18。我尝试设置 value 属性，但它不起作用。
我的代码片段：
<input type="color" name="color" value="#ff0000" ngModel />
我有一个 Angular 应用程序，它有一个可变长度的表，我希望用户能够在其中为每一行输入值。
这是我正在尝试做的事情的基本内容。
在用户从 p-fileUpload 中选择了多个文件后，我希望能够在表中显示每个文件并允许他们为每条记录添加附加数据（元数据）。
<tbody>
<tr *ngFor="let file of files; let ii = index">
<td>{{ file.name }}</td>
<td>{{ file.size }}</td>
<td>{{ file.type }}</td>
<td>
<!--Would like to be able to grab this value here-->
<input type="text" placeholder="Enter Title">
</td>
</tr>
</tbody>
我认为这应该相对简单，但到目前为止我还没有想出解决方案。如果我尝试通过为文本输入分配 formControlName 或 ngModel 来实现这一点，那么这些方法实际上不起作用，因为它们是为单个输入组件设计的，而不是表格中的多个输入组件之一。
有没有办法为每一行的输入分配其自己的唯一标识符，然后获取 ts 文件中的值？
谢谢！