css-in-js 相关问题

在JS中解析JSON字符串[已关闭]

在JS文件中我有： {html: '测试代码 HTML', css: '测试代码 CSS'} 我如何解析它以获得 html 和 css 的值？这是我尝试过的： const json = JSON.parse(数据); 反对...

JSP 看不到资源文件夹中的 CSS 和 JS 文件

我的 Web 应用程序中的 css 和 js 导入存在一些问题。我正在使用 Servlet/JSP/CSS/JS。我对这个问题感到抱歉，我看到了很多关于这个主题和情况的问题和答案，但是

假设我有以下目录结构：文件.txt 文件.css 文件.js 目录/文件.txt 目录/文件.css 目录/file.js 目录/子目录/文件.txt 目录/子目录/文件....

我的 css 无法在与 vite 反应时自动加载

我有一些css和js文件，我尝试使用vite导入到React中的视图中，以便它加载样式，但它没有加载，当我进入视图时，我必须注释和取消注释小鬼...

如何在没有js的情况下在页面内容上增加下拉菜单？

我的主页的菜单包括一个下拉菜单。我使用 html、css 和 php，但不使用 js。我无法让下拉菜单不下推页面内容，而是打开内容。你可以吗

Gem 安装无限期挂起

背景：我是一名擅长使用 HTML、CSS 和 JS 的设计师。但当谈到设置我的环境时，我就不足了。我最近购买了一台家用电脑。我想设置 Midd...

我实际上正在尝试使用 html css 和 js 构建一个网页我想让它响应我尝试给出 right:-200;让它消失但失败了[关闭]

我尝试将导航栏设置为top：0；右：-200；为了让它消失，我们的js和函数我希望它在我点击切换时打开，但是当我给出-200时，我有水平滚动帮助我

生产中的静态文件出现 Django 301 和 403 禁止错误

我正在尝试使用nginx和gunicorn在ubuntu 14.04 vps上部署django网站，但是我的css文件和js文件没有加载。我在默认的django开发服务器上开发了它并且...

可以在关键帧末尾调用函数吗？

我正在用 HTML/JS/CSS 制作一个游戏，它在顶部有一种新闻系统，文本在屏幕上滚动，一旦到达末尾，新的文本字符串就会开始滚动。我的方式就是这样

LiteSpeed WebServer 上的 MIME 类型（“text/html”）不匹配（X-Content-Type-Options：nosniff）

不知道如何解决这个问题，它基本上会引发 React 应用程序构建 css/js 引用文件的错误。可以查看 https://eliptum.tech/dev/ 从浏览器开发工具控制台：资源来自“https://eli...

如何在node.js上运行多个文件？

我正在开发一个学校项目，我计划使用 Node.js 来托管它。问题是，每次我尝试运行它时，它都不会返回任何内容。我在一个文件中有 4 个 HTML、2 个 CSS 和 2 个 JS 文件...

顺风未加载颜色

有简单的html：公共/index.html：有简单的html： public/index.html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body class="text-red-600"> some text </body> css 是从 tailwindcss -i src/styles.css -o public/styles.css 获取的 src/styles.css: @tailwind base; @tailwind components; @tailwind utilities; tailwind.config.js: module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } <body>标签中的红色不适用。默认的顺风类别是否导入到public/styles.css？ Tailwind 配置中的 public/index.html 文件似乎没有覆盖 content 文件。您必须确保使用 Tailwind 类的源代码文件被 content 文件 glob 覆盖，否则 Tailwind 将不会扫描这些文件，也不会为存在的类名生成 CSS 规则。考虑阅读有关配置的文档content。 module.exports = { content: [ "./src/**/*.{html,js}", "./public/index.html", ], theme: { extend: {}, }, plugins: [], }

如何向React.js添加HTML组件轮播

App.html 轮播应用程序.html <!DOCTYPE html> <html> <head> <title>Carousel</title> <link rel="stylesheet" type="text/css" href="./css/materialize.min.css"> </link> <link rel="stylesheet" type="text/css" href="App.css"> </link> </head> <div class="carousel"> <div class="carousel-item"> <img src={require("./1.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./2.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./3.png")} class="responsive-img"></img> </div> <script src="./js/materialize.min.js"></script> <script> const small = document.querySelector('.carousel'); var inst = M.Carousel.init(small, {}); inst.dist(50); </script> </div> </html> 应用程序.js import React from 'react'; var perf = require('./App.html'); class App extends React.Component { render(){ return ( <div dangerouslySetInnerHTML={{ __html: perf }} ></div> ); } } export default App; 有人可以帮我解决如何在 JS 文件中添加 HTML 文件并通过 JS 文件运行 HTML 文件吗？我在 HTML 中使用 Materialize 制作了一个轮播，但我无法在 JS 中编写代码，因此，如果可能的话，有人可以帮助我将 HTML 文件转换为 JS 文件，或者如何导入 HTML 文件在我的 JS 文件中。您可以简单地将所有 html 代码插入 App.js 文件中，reactjs 不需要任何 .html 文件。请按照下面的代码进行操作，希望您能理解。我只是将所有 HTML 代码放入 App.js 的父 div 中。 import React from 'react'; var perf =require('./App.html'); class App extends React.Component { render(){ return ( <div> <div class="carousel"> <div class="carousel-item"> <img src={require("./1.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./2.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./3.png")} class="responsive-img"></img> </div> </div> </div> ); } } export default App; 只需使用react-create-app模板，基本的html（head，meta）东西已经就位，只需修改src目录即可满足您的需求。例如 index.js 会是这样的， import React from 'react'; import './App.css'; // For Your CSS file class App extends React.Component { render(){ return ( <div class="carousel"> <div class="carousel-item"> <img src={require("./1.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./2.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./3.png")} class="responsive-img"></img> </div> ); } } export default App; 如果您需要更改基础html，您可以在公共目录中进行操作。编辑：（对于依赖项）当您使用 materialize-css 时，您可以通过使用 materialize-css@next 和此 cmd npm 将 npm install materialize-css@next 安装为依赖项来使用它有关安装的更多信息可以在此处找到来源：https://materializecss.com/getting-started.html 我看到您对许多正在使用依赖项的答案做出了回应。如果这是通过 CDN 实现的，您只需将其添加到公共文件夹中的 index.html 文件中，并在需要时使用您的依赖项。不过，我认为 Materialise 有一个可以安装的节点方面。

我正在使用 laravel livewire 3 获取页面未找到

单击时，我在控制台中找不到页面错误：POST http://localhost/livewire/update 404（未找到） counter.blade.php {{ $this->count }} 单击时，我在控制台中找不到页面错误：POST http://localhost/livewire/update 404（未找到） counter.blade.php <div> <h1>{{ $this->count }}</h1> <button wire:click="increment">+</button> <button wire:click="decrement">-</button> </div> 在刀片中我有以下内容： @section('custom-js') @livewireScripts @endsection @section('custom-css') @livewireStyles @endsection <livewire:counter /> 当单击增量或减量时，我找不到页面如果您使用Livewire3，则无需手动注入livewire资源的css和javascript，因为它们是自动注入的。检查此文档页面以查看。您必须先创建 Livewire 组件 php artisan make:livewire CreatePost Livewire 组件的更新功能。 public function update(){...}

从右到左打印表格单元格

我制作了一个表格，并希望第一个单元格从右侧开始，而不是默认从左侧开始。我尝试更改 CSS 中的 float 属性，但似乎没有帮助。这是代码：我制作了一个表格，并希望第一个单元格从右侧开始，而不是默认从左侧开始。我尝试更改 CSS 中的 float 属性，但似乎没有帮助。这是代码： <table border="0" width="100%" cellspacing="0" align="center" class="result_table"> <tr align="right"> <th bgcolor="#cccccc" align="right">1</th> <th bgcolor="#cccccc" size="17">2</th> <th bgcolor="#cccccc">3</th> <th bgcolor="#cccccc">4</th> </tr> </table> <style> table.result_table { float:right; } </style> 任何人都可以建议一种方法来改变这张桌子的浮动吗？正如评论中所建议的，您可以将方向性设置为从右到左（RTL）。但是，除非您的表格内容采用从右到左的语言，否则您还应该将表格内容元素中的方向性设置为从左到右。否则，它们继承 RTL 方向性，这在许多情况下会引起意外，因为方向性还设置整体文本方向性。这不会影响西方语言的正常文本，但会影响例如像“4 (5)”这样的内容，在 RTL 方向性下会显示为“(5) 4”。因此，您应该设置 table.result_table { direction: rtl; } table.result_table caption, table.result_table th, table.result_table td { direction: ltr; } 有一种更简单的方法。您可以将 dir="rtl" 添加到表格中。 <table dir="rtl"> ... </table> 或者您可以使用 CSS 而不是使用 HTML 属性： <table style="direction:rtl"> ... </table> 我不确定这是否可以仅使用 CSS 来实现。如果使用 jQuery 适合您，这里有一个起始想法，可能会让您获得所需的结果： CSS： .result_table{float:left; width:100%; border-collapse:collapse; padding:0;} .result_table th{float:right; padding:0;} JS： var cols = $('.result_table th').length; var colWidth = 100 / cols; $('.result_table th').css({width:colWidth+'%'}) 示例 - jsFiddle

React CSS 导入

在我的 Home.js 中我有以下代码从“反应”导入反应；导入'./Home.css'; 常量文本变体 = {...} 常量主页 = () => { 返回（ ... 在我的 Home.js 中，我有以下代码 import React from 'react'; import './Home.css'; const textVariants = {...} const Home = () => { return ( <div id='home' className='page'> <motion.div className='text-wrapper' variants={textVariants} initial='initial' animate='animate'> <motion.div className='text-container' variants={textVariants}> <motion.h1 variants={textVariants}>NAME</motion.h1> <motion.h2 variants={textVariants}>An enthusiatic university student</motion.h2> </motion.div> </div> ); }; export default Home; 在 Home.css 中， .text-wrapper { max-width: 1366px; height: 100%; } .text-container { height: 100%; width: 50%; padding-left: 10%; h1 { letter-spacing: 10px; font-size: 50px; margin-bottom: -5%; } h2 { font-size: 80px; } } 我有 About.js 和 About.css 以及以下内容， import './About.css'; const About = () => { return ( <div id='about' className='page'> <div className='text-container'> <h1>About Me</h1> </div> </div> ); }; 但是 About.js 应用了 Home.css 中的内容，即 .text-container。我该如何避免这种情况？我不知道为什么 Home.css 被应用到 About.js 即使我没有导入它。在React js中，任何根组件中导入的css文件适用于整个项目。 css 类可以在项目层次结构中的任何位置访问。我们无法避免这种情况，因为文件被应用于根目录。您必须为不同的组件使用特定的类名称。专业提示：创建可重用的组件，以便您可以将相同的类应用于每个相同的组件..

使用selenium在联合选择/列表元素中导航

我正在使用 beautifulSoup / selenium 进行一些网络抓取，但在使用某个下拉选择菜单时遇到了困难。粗略的 HTML 如下：我正在使用 beautifulSoup / selenium 进行一些网络抓取，但在使用某个下拉选择菜单时遇到了困难。粗略的HTML如下： <div class="selection-box" alt="selection" title="selection" role="select" tabindex="0"> <select id="select" style="display: none;"> <option value="1">First</option> <option value="2">Second</option> <option value="3" selected="selected">Third</option> </select> <div class="current">Third</div> <ul class="options" style="display: none;"> <li class="search--option" alt="First option" title="First option" aria-label="First option" role="option" tabindex="0">First</li> <li class="search--option" alt="Second option" title="Second option" aria-label="Second option" role="option" tabindex="0">Second</li> <li class="search--option selected" alt="Third option" title="Third option" aria-label="Third option" role="option" tabindex="0">Third</li> </ul> 当我通过浏览器操作菜单时，它会发生如下变化：包装 div 类更改为“选择框活动” ul 更改为“display: block” 一旦我选择了不同的选项，这两个选项就会再次颠倒，中间的 div 和所选的 li 项目也会相应变化我想使用selenium来选择某个选项。到目前为止，我尝试了以下方法： from selenium.webdriver.support.ui import Select drpBrand = driver.find_element(By.ID, "select"); css = 'select#select' # css selector of the element js = """const data_options = Array.from(document.querySelectorAll('{css}')); data_options.forEach(a=>{{a.style='display:block;';}});""".format(css=css) driver.execute_script(js) drpBrand.select_by_visible_text("Third"); 这是使用各种线程的最佳方法（元素不可见：元素当前不可见并且可能无法操作 - Selenium webdriver，How to select a dropdown value in Selenium WebDriver using Java），但它仍然没有不工作。有任何想法吗？我想我还需要定位列表（除了选择之外）？错误总是存在 selenium.common.exceptions.ElementNotInteractableException：消息：元素不可交互：元素当前不可见，可能无法操作谢谢如果我正确理解您的目标（选择下拉选项），我建议模拟本机用户行为并依赖可见元素。下拉元素有选择器 .superstar-search--selection-box。您应该等待它出现并单击它。下拉选项有选择器 .superstar-search--option 。您应该等待此元素的可见性并过滤它们，例如，通过包含文本条件。您可以通过将下拉打开选择器和下拉选项选择器定义为函数参数来构建比我编写的更复杂的函数。 from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC driver = webdriver.Chrome() driver.get("https://www.wwe.com/superstars") wait = WebDriverWait(driver, 15) def select_dropdown_option_by_text(text): dropdown = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, '.superstar-search--selection-box'))) dropdown.click() options = wait.until(EC.visibility_of_all_elements_located((By.CSS_SELECTOR, '.superstar-search--option'))) expected_option = [element for element in options if element.text.lower() == text] expected_option[0].click() select_dropdown_option_by_text('all superstars')

从后台js到内容js的sendMessage不起作用，但内容js到后台js可以工作

content.js chrome.runtime.onMessage.addListener( （请求，发送者，发送响应）=>{ console.log("消息已收到"); console.log(请求、发送者、sendResponse); ...

如何以 Svelte 方式设置导出和开槽零件的样式？

Svelte slot 的功能是否像 vanilla-js/dom 一样（我似乎无法让它工作）。在 html/js 中我可以这样做：身体{颜色：红色;} /* 从外部设置暴露部分的样式 */ ...</desc> <question vote="0"> <p>Svelte <pre><code>slot</code></pre>的功能是否像 vanilla-js/dom 一样（我似乎无法让它工作）。</p> <p>在 html/js 中我可以做：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><style> body {color: red;} /* style exposed part from outside */ my-element::part(header) {color: green;} </style> <h1>Hello World</h1> <my-element> <div slot="header"><strong>Header</strong></div> <div slot="body">Body</div> </my-element> <script> customElements.define('my-element', class extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> .container { border: solid 1px blue; padding: 5px; position: relative; &:after { content: "my-element"; display: block; position: absolute; bottom: -.5em; right: 5px; border: inherit; background-color: white; padding: inherit; } } /* style inserted/slotted part from inside */ [part="body"] ::slotted(div) { background-color: lightyellow; } </style> <div class="container"> <header part="header"><slot name="header"></slot></header> <hr> <div part="body"><slot name="body"></slot></div> </div> `; } }); </script></code></pre> </div> </div> <p></p> <p>其中 <pre><code>h1</code></pre> 的全局样式为红色，标有 <pre><code>part="header"</code></pre> 的元素从外部设置为绿色，插入 <pre><code>slot="body"</code></pre> 的内容从内部（shadow dom）设置为绿色有浅黄色背景。</p> <p>我不知道如何在 svelte 中执行任何这种（受控）跨界样式？（例如，当使用 <pre><code>AppShell::part(content)</code></pre> 时，我收到错误：</p> <pre><code>[plugin:vite-plugin-svelte] C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 Expected a valid CSS identifier C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 21 | 22 | <style> 23 | AppShell::part(content) { | ^ </code></pre> </question> <answer tick="false" vote="0"> <p>这里有关于<a href="https://learn.svelte.dev/tutorial/slots" rel="nofollow noreferrer">老虎机的课程</a>。最好参考该工具的文档。 Svelte 的学习网站非常棒。</p> <pre><code>// Slotted component, say Test.svelte. <div class="private-parent"> <slot /> </div> <style> div.private-parent { color: blue; } </style> </code></pre> <p>然后，您使用该组件：</p> <pre><code><script> import Test from './Test.svelte'; </script> <Test>  <p class="outside-style">Hello!</p> </Test> <style> p.outside-style { color: darkred; } </style> </code></pre> </answer> </body></html>

下拉按钮在 Bootstrap 5.3 上不起作用

我正在使用 Express、EJS 和 bootstrap 制作一个网站，但下拉按钮不起作用代码： <%- include('../includes/head') %> 我正在使用 Express、EJS 和 bootstrap 制作一个网站，但下拉按钮不起作用代码： <%- include('../includes/head') %> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> <%- include('../includes/footer') %> 头： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <title>Title</title> </head> <body> 页脚： <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html> 当我单击按钮时，它不显示下拉菜单的内容我不知道这是否重要/有效，但尝试将引导脚本从页脚移动到页眉，它可能基于加载顺序。

JS对象变量作为键值赋值

这个语法在JS中是如何调用的：让名称=“asdf”；让 obj = { 名称 }; // <-- this

css：溢出滚动添加额外的填充

我有以下html和css代码： html，正文{ 保证金：0； } #包含...</desc> <question vote="0"> <p>我有以下 html 和 css 代码：</p> <pre><code><!DOCTYPE html> <html> <head> <style type="text/css"> html, body { margin: 0; } #container{ width:100vw; height:100vh; background-color: green; } #left-bar{ position: absolute; width: 300px; height: 100vh; background-color: red; overflow: scroll; } </style> </head> <body> <div id="container"> <div id="left-bar" > </div> </div> </body> </html> </code></pre> <p>它给出： <a href="https://i.sstatic.net/sbXnw.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvc2JYbncucG5n" alt="extra padding overflow scroll"/></a></p> <p>左侧栏内有一个填充，我不明白为什么以及如何删除它。</p> <p>我尝试过的事情：</p> <ul> <li>在左侧栏上添加<pre><code>padding: 0;</code></pre>，它不起作用（也可以使用<pre><code>!important</code></pre>）。</li> <li>使用检查器来了解填充的来源。我没找到。</li> <li>删除左侧栏上的<pre><code>overflow: scroll</code></pre>。它有效，但我希望左栏具有以下行为 <pre><code>overflow: scroll</code></pre></li> </ul> <p><strong>如何删除左栏中的填充？</strong></p> <p><strong>编辑：错误用完全相同的代码消失了。</strong></p> <p>现在使用相同的代码： <a href="https://i.sstatic.net/Ch1IF.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvQ2gxSUYucG5n" alt="no padding"/></a></p> <p>我做了什么：</p> <ul> <li>重启电脑，bug依然存在</li> <li>添加CSS代码来设置滚动条的样式</li> <li>删除我添加的代码 --> bug 消失了</li> </ul> <p>我不明白为什么...</p> </question> <answer tick="false" vote="0"> <p>您看到的是一个空的滚动条。设置溢出<pre><code>overflow: auto</code></pre>。仅当内容溢出时才会显示滚动条。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <style type="text/css"> html, body { margin: 0; } #container{ width:100vw; height:100vh; background-color: green; } #left-bar{ position: absolute; width: 300px; height: 100vh; background-color: red; overflow: auto; } </style> </head> <body> <div id="container"> <div id="left-bar" > </div> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>您可能会考虑使用一个具有最小滚动条的插件（也许是<a href="https://grsmto.github.io/simplebar/" rel="nofollow noreferrer">simplerbar</a>）。还可以考虑只做 <pre><code>overflow-y:scroll</code></pre> 以获得更容易接受的外观。您还可以更改滚动装订线的颜色<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color" rel="nofollow noreferrer">colors</a></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var el1 = document.querySelector('[data-id=div1]'); var el2 = document.querySelector('[data-id=div2]'); instance1 = new SimpleBar(el1); instance2 = new SimpleBar(el2);</code></pre> <pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/5.3.8/simplebar.min.js" integrity="sha512-2SAzoBQi2FbvWkvcsoYW4PH478pUu0gwa7BRA6YQxg6kCWUIOIDfFHMLH57GbWeLa+pkYitOD5j9mIhIt3CLKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/5.3.8/simplebar.min.css" integrity="sha512-uZTwaYYhJLFXaXYm1jdNiH6JZ1wLCTVnarJza7iZ1OKQmvi6prtk85NMvicoSobylP5K4FCdGEc4vk1AYT8b9Q==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div dir="ltr"> <div data-id="div1" style="height: 300px; width: 200px; padding:10px; display: inline-block; border:1px solid gray; background: lightblue; "> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <section data-id="div2" style="height: 300px; width: 200px; padding:10px; display: inline-block; border:1px solid gray"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p> </section> </div></code></pre> </div> </div> <p></p> </answer> </body></html>

有什么问题吗？文本区域什么也没显示，但值是

我正在编写代码以在中以灰色向用户显示提示；接下来的想法是：最初以灰色显示“请在此处输入您的询问”；如果用户点击它，颜色会变为...</desc> <question vote="3"> <p>我正在编写代码以在 <pre><code><textarea/></code></pre> 中以灰色向用户显示提示；</p> <p>下一个想法是：</p> <ol> <li>最初将<pre><code>'Please, type your inquiry there'</code></pre>置于灰色；</li> <li>如果用户单击它，颜色将变为黑色，文本将变为 <pre><code>''</code></pre>。这部分工作正常；</li> <li>如果用户输入然后删除（即将字段留空），那么我们需要将 <pre><code>'Please, type your inquiry there'</code></pre> 放回灰色。</li> </ol> <p>步骤 (3) 在 Chrome 和 Firefox 中均不起作用。它什么也没显示。当我使用 Chrome 检查器时，它显示：</p> <blockquote> <p>element.style { 颜色: rgb(141, 141, 141); }</p> </blockquote> <p>这是正确的，而 HTML 中的 <pre><code>"Please, type your inquiry there"</code></pre> 也是正确的。但场地是空的。可能是什么问题？？？我特别使用了 <pre><code>console.log()</code></pre>，它们还显示应该是......的输出 </p>这是 HTML 和 JS 代码：<p> </p><code><textarea name='contact_text' id='contact_text' onclick='text_area_text_cl();' onBlur='text_area_text_fill();'> </textarea> <script> var contact_text_changed = false; var contact_contacts_changed = false; function text_area_text() { if (contact_text_changed == false) { $("#contact_text").css("color","#8d8d8d"); $("#contact_text").html('Please, type your inquiry there'); } else { $("#contact_text").css("color","#000000"); } // Write your code here }; function text_area_text_cl() { if (contact_text_changed == false) { $("#contact_text").text(''); $("#contact_text").css("color","#000000"); console.log('sdfdfs111'); contact_text_changed = true; } }; function text_area_text_fill() { if ($("#contact_text").val() == '') { contact_text_changed = false; $("#contact_text").css("color","#8d8d8d"); $("#contact_text").html('Please, type your inquiry there'); //document.getElementById('contact_text').innerHTML = 'Please, type your inquiry there' console.log('sdfdfs'); } else { console.log('__'); } }; // call functions to fill text_area_text(); </script> </code><pre> </pre> </question> <answer tick="true" vote="3">要设置 <p><code><textarea></code><pre> 的值，您需要使用 </pre><code>.val()</code><pre>:</pre> </p><code>$("#contact_text").val(''); </code><pre> </pre>或<p> </p><code>$("#contact_text").val('Please, type your enquiry there'); </code><pre> </pre>等等。让“占位符”代码正常工作是很棘手的。 <p>较新的浏览器允许<a href="http://caniuse.com/#search=placeholder" rel="nofollow">：</a> </p><code><textarea placeholder='Please, type your enquiry there' id='whatever'></textarea> </code><pre> </pre>他们会为您管理这一切。<p> </p><p>编辑<em> - 从评论中，这里解释了为什么 </em><code>.html()</code><pre> 最初有效（嗯，它</pre>确实<em>有效，但请继续阅读）。 </em><code><textarea></code><pre> 元素的标记内容（即元素中包含的 DOM 结构）表示 </pre><code><textarea></code><em> 的 </em>initial<pre> 值。在任何用户交互之前（和/或在 JavaScript 触及 DOM 的“value”属性之前），这就是显示为字段值的内容。然后，更改 DOM 的该部分就会更改该初始值。然而，一旦进行了一些用户交互，初始值就不再与页面视图相关，因此不会显示。仅显示更新后的值。</pre> </p> </answer></body>

Next.js 14 个 tailwind css 类不起作用

我在新项目中将 Tailwind CSS 与 Next.js 14 一起使用，但是当我在 page.tsx 文件中使用 Tailwind CSS 类时，它不起作用。我尝试更改 tailwind.config.ts 和 tailwind.config.js acco...

CSS 盒子模型的元素是什么？

CSS 盒子模型的元素是什么？给我与问题相关的答案... 区分 CSS3 和 CSS2。 CSS3和CSS2的主要区别在于CSS划分了不同的se...

如何在 Tailwinds CSS 中创建分组按钮？

我正在尝试使用 Tailwind CSS 创建此输入布局，但我似乎没有发现 Tailwind CSS 默认支持此功能。我该怎么做？预先感谢您。

CSS 中的滚动条问题

/* 自定义 CSS =================================================== */ body::-webkit-滚动条 { 宽度：10px； } body::-webkit-scrollbar-track { 框阴影：插入 0 0 6px rgba(0, 0, 0, 0.3); }

ASP.NET MVC 项目模板在移动设备上无法调整为 100%

我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。我在视图上使用数据表： @模型IEnumerable 我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。我在视图上使用数据表： @model IEnumerable<iziConference.Models.EventAttendee> <h2>Participantes.</h2> <br /> <button><a style="text-decoration: none" href='@Url.Action("Create", new { eventId = ViewBag.EventId })'>Criar Participante</a></button> <button id="at-btn-refresh"> Actualizar</button> <input id="eventId" type="hidden" value="@ViewBag.EventId"> <table id="at-attendees-list" cellpadding="10" border="1" class="row-border stripe"> <thead> <tr> <th>ID</th> <th>Tipo</th> <th>Nome</th> <th>Email</th> <th>Estado </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr id="[email protected]_Id"> <td style="padding: 5px"> @Html.DisplayFor(modelItem => item.Attendee.Id) </td> <td> @Html.DisplayFor(modelItem => item.AttendeeType) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Name) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Email) </td> <td> @if (item.IsActive) { <button id="[email protected]_Id" class="at-btn-active-state active" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="false" data-show-confirmation-alert="true">Desactivar</button> } else { <button id="[email protected]_Id" class="at-btn-active-state inactive" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="true" data-show-confirmation-alert="true">Activar</button> } </td> </tr> } </tbody> </table> 由脚本加载： var _atteendeesList = "at-attendees-list"; $("#" + _atteendeesList).DataTable({ "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 使用默认的_Layout.cshtml： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>izigo Conference - Gestor de Conteúdos</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <header> <div class="content-wrapper"> <section id="login"> @Html.Partial(MVC.Account.Views._LoginPartial) </section> <div style="padding: 10px;"> @if (Request.IsAuthenticated) { <nav> <ul id="menu"> <li>@Html.ActionLink("Home", MVC.Home.Index())</li> <li>@Html.ActionLink("Participantes", MVC.Attendee.Index())</li> <li>@Html.ActionLink("Check-in", MVC.Checkin.Index())</li> </ul> </nav> } </div> </div> </header> <div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> <footer style="padding-left: 25px;"> <div class="content-wrapper"> <div class="float-left"> <p>© @DateTime.Now.Year - <a href="https://www.izigo.pt/conference" target="_blank">izigo Conference</a> - <i>Powered by</i><a href="https://www.izigo.pt" target="_blank">izigo.pt</a></p> </div> </div> </footer> @Scripts.Render("~/bundles/jquery", "~/bundles/iziconference") @RenderSection("scripts", required: false) </body> </html> 研究了 dataTables 库的选项后，我找到了一个创建响应式解决方案的选项：我已经包含了响应表结构和columnDefs的选项，以选择哪些选项在移动设备中保持可见： $("#" + _atteendeesList).DataTable({ "responsive": true, "columnDefs": [ { responsivePriority: 1, targets: 0 }, { responsivePriority: 2, targets: -1 } ], "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 我还必须在捆绑包中包含数据表扩展的 js 和 css 响应式库（可在此处下载：https://datatables.net/download/）： bundles.Add(new ScriptBundle("~/bundles/iziconference").Include( "~/Content/Scripts/datatables.min.js", "~/Content/Scripts/dataTables.responsive.min.js")); // add-on bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/Styles/datatables.min.css", "~/Content/Styles/responsive.dataTables.min.css"));

CSS 网格自定义布局

我正在尝试构建一个 CSS 网格我不想在 item2 和 item3 之间有空间，并且希望这些项目在容器顶部对齐。是否可以仅使用 CSS 而不修改...

为什么我的 React 应用程序在 http://localhost:3000/static/js/bundle.js 处显示错误

启动我的 React 应用程序时收到以下消息：错误[对象对象]在handleError（http://localhost:3000/static/js/bundle.js:56279:58）在http://localhost:3000/static/js/bundl...

CSS 在窄屏幕上显示每个单元格一行的表格

我的 HTML 看起来有点像这样我的 HTML 看起来有点像这样 <html><body><table> <thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></thead> <tbody> <tr><td>1A</td><td>1B</td><td>1C</td><td>1D</td><td>1E</td></tr> <tr><td>2A</td><td>2B</td><td>2C</td><td>2D</td><td>2E</td></tr> <tr><td>3A</td><td>3B</td><td>3C</td><td>3D</td><td>3E</td></tr> </tbody> </table></body></html> 每一行代表一个对象，列是它的属性。实际上，单元格值相当长——有时甚至有 20-30 个字符长。它在大多数设备上渲染良好，但在较小的手机上可能会出现问题。我知道我可以在狭窄的设备上抑制某些列，但在这个特定的情况下感觉不太好。目前我的桌子上有 x-overflow: scroll，但我更希望有一些 CSS 可以使表格在窄设备上呈现得更像这样： A: 1A B: 1B C: 1C D: 1D E: 1E ----- A: 2A B: 2B C: 2C D: 2D E: 2E ----- (etc) 我了解如何测试设备宽度，因此出于这个问题的目的，我们假设我想无条件地执行此操作。稍微更改一下 HTML 标记就可以了，例如添加额外的类或属性，尽管我想使用 <table> 元素来保留它，每个逻辑行有一个 <tr>。这是为了向后兼容，因为我知道有相当多的用户会抓取该网站（尽管存在更简洁的 API）。由于内部政治，如果可能的话，我宁愿避免需要 Javascript 的解决方案（并且无论如何，如果需要，我知道如何编写 JS 解决方案）。我可以做到这一点，但我不知道如何从这里硬编码为“X”的字段名称开始： thead { display: none; } table, tr, td { display: block; } tr + tr { border-top: thin solid black; } td::before { content: "X:"; display: inline-block; width: 2em; } 我见过很多网站都在做这种事情，但目前我正在努力寻找一个在 CSS 中做这件事的网站。看起来这应该是一个常见问题，但我很难知道要搜索哪些术语，因此可能会在这里或其他地方错过一些很好的解释。你就快到了。可能会使用例如data-col 元素上的 <td> 属性并在 CSS 中引用它们 content 上的 :before thead { display: none; } table, tr, td { display: block; } tr+tr { border-top: thin solid black; } td::before { content: attr(data-col)':'; display: inline-block; width: 2em; } <table> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> </thead> <tbody> <tr> <td data-col="A">1A</td> <td data-col="B">1B</td> <td data-col="C">1C</td> <td data-col="D">1D</td> <td data-col="E">1E</td> </tr> <tr> <td data-col="A">2A</td> <td data-col="B">2B</td> <td data-col="C">2C</td> <td data-col="D">2D</td> <td data-col="E">2E</td> </tr> <tr> <td data-col="A">3A</td> <td data-col="B">3B</td> <td data-col="C">3C</td> <td data-col="D">3D</td> <td data-col="E">3E</td> </tr> </tbody> </table> ABCD

使用 :host ::ng-deep 设置 CSS 角色到角度组件 CSS 不起作用？

尝试使用以下方法设置角度组件的 CSS prop :host ::ng-deep .p-dropdown-panel { 变换原点：中心底部！重要；顶部：-119px！重要；左：0！重要； } ...

Vite 如何处理删除内置 .css 文件中的 .css 嵌套？

我一直在使用 Vite，并注意到由于删除了嵌套，构建的 .css 文件与原始源有所不同。具体来说，Vite 似乎压平或删除了

自动完成功能不适用于 VSCode 中的 TypeScript + Node

所以如果我编写纯 JS (.js)，它的工作方式如下：但对于 TypeScript (.ts) 它不起作用：

仅当超过一定高度时才可调整大小

考虑以下 HTML+CSS 中可调整大小的 div： Lorem ipsum dolor sat amet.... /* CSS */ .mydiv { 高度：200px；溢出-y：...

React、Mantine、CSS 模块无法正确加载

我正在使用 TypeScript 和 Mantine 开发一个 React 项目。我正在使用 CSS 模块来设置组件的样式。然而，在看似随机的时间，CSS 停止加载（据我从 Dev 观察到......

如何使用 JavaScript 变量调整 CSS 属性？

我的问题：大家好。我只是有一个关于使用 JavaScript 更改 CSS 属性的问题。我想使用我在 JavaScript 中编写的方程式来更改 CSS 属性的值。我的目标是...

能把客户端js分离出来吗？

我构建谷歌网络应用程序的方式是使用 html 文件中的所有客户端 js 以及 code.gs 文件中的所有服务器端代码。有什么方法可以将 JS 与 ... 分开吗

Select2 中的样式选择选项

问题是如何在选项的一部分上应用样式。我有一个像这样的选择：项目 1 问题是如何在选项的一部分上应用样式。我有一个像这样的选择： <select id="my_select"> <option value="1">Item 1 <span class="color-red">20 calls</span></option> <option value="2">Item 2 <span class="color-red">10 calls</span></option> <option value="2">Item 3 <span class="color-red">30 calls</span></option> </select> 浏览器不允许在 OPTION 中使用标签并删除它们。因此，一个可能的解决方法是使用 HTML 实体： <select id="my_select"> <option value="1">Item 1 <span class="color-red">20 calls</span></option> <option value="2">Item 2 <span class="color-red">10 calls</span></option> <option value="2">Item 3 <span class="color-red">30 calls</span></option> </select> 现在浏览器将每个选项的全部内容视为文本。这是 Jquery 代码： $('#my_select').select2({ minimumResultsForSearch: -1 }); 我偶然发现的最后一件事是在渲染 Select2 和下拉菜单后分别用“<" and ">”符号替换实体“<”和“">”，以默认黑色进入第一个选项框“Item 1”， “20 次通话”为红色（CSS 可用：.color-red {color:red;}）。其他选项框也是如此。我试图在文档中找到答案，但没有任何效果。例如， $('#my_select').select2({ minimumResultsForSearch: -1, templateResult: function (item) { item.text.replace (/>/g,'>').replace (/</g,'<'); } }); 非常感谢任何有关如何解决此问题的想法。您需要重写 escapeMarkup 选项以允许 HTML 内容。在templateResult中，您告知要如何以及以何种方式呈现内容，在本例中，我在每个选项中使用数据文本属性的返回。 $('#my_select').select2({ minimumResultsForSearch: -1, escapeMarkup: function(item) { return item; }, templateResult: function(item) { return $(item.element).data('text'); } }); .color-red { color: #ff0000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> <select id="my_select" style="width: 100%;"> <option></option> <option value="1" data-text='Item 1 <span class="color-red">20 calls</span>'>Item 1 20 calls</option> <option value="2" data-text='Item 2 <span class="color-red">10 calls</span>'>Item 2 10 calls</option> <option value="3" data-text='Item 3 <span class="color-red">30 calls</span>'>Item 3 30 calls</option> </select>

Next JS Link 标签有时会从动态路由中删除“/”

我正在使用 Next JS 12.2.0。我有如下链接标签， {帖子标题} 问题是某些 href 结尾有

Keycloak-js updateToken(minValidity) 需要澄清

我在Keycloak-js中阅读了很多该方法的示例，但没有对以下方法有明确的解释。 updateToken(minValidity: number): KeycloakPromise; 注：我是

Safari 不显示/渲染图像的 css

我的 GitHub 页面网站上有一个个人资料图片，它使用一些 CSS 使其看起来很酷。图像在 chrome 或 Firefox 中显示完美，但在 safari 中似乎忽略了图像的所有 css...

如何使用CSS创建带有曲线的自定义按钮

我正在尝试使用CSS实现一个自定义样式按钮，如下图所示。我在我的 css 文件中尝试了这个，并且能够实现更接近所需设计的效果： .casinoButton {

css 选择器：div 内第一段的第一个字母

曾几何时.. 一个美丽的公主.. 我如何选择（在我的CSS中）这里面第一段的第一个字母...

为什么每次按下 Ctrl + F5 时 Angular 都会调用 SCSS 文件？

我在使用 Angular 时遇到问题，当我按 Ctrl + F5 时，CSS 文件会重新加载，这会破坏我的布局，直到 CSS 文件加载完成。 F5没有问题，因为CSS文件是缓存的...

这个curl命令的node js等效项是什么？

我有这个curl命令，我需要在node js中编写：卷曲-X POST \ https://image.adobe.io/pie/psdService/renditionCreate \ -H“授权：不记名$令牌”\ -H“x-api-...

如何在p5.js和matter.js中用图像填充形状

我正在尝试使用 p5.js 和 Matter.js var Engine = Matter.Engine, 世界=物质.世界，身体=物质.身体，事件 = 事情.事件，身体=妈...

何时切换搜索栏和徽标下降？

.navbar { 背景颜色：#F91F46； } .src-bar { 边框：0；边框半径：5px；概要：无；左内边距：15px；宽度：30vw； } .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="img/Logo.avif" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <div class="justify-content-end"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </div> </nav> 切换时，我希望折叠 div 居中。我知道原因 - 我将折叠和切换 btn 放在 justify-end div 内，因为我需要切换 btn 位置位于右侧。现在，当切换时，我的折叠位于右侧，但我希望在切换时，折叠div到中心。当我删除 justify-end div 时，它位于左侧，但如果删除它，每个导航元素都会移动到 nav 和 md 视图中 lg 的左侧。看起来像这样或中心我们确实需要将 .nav-collapse 移到 justify-end 元素之外，才能在较窄的视口上获得所需的布局。要将菜单显示在右侧，请通过 flex-grow: 1 类将 .nav-collapse 应用于 flex-grow: 0 元素，覆盖 flex-grow-0 上的默认 .nav-collapse。为了使窄视口的链接元素居中，.navbar-nav中的元素采用垂直柔性布局，因此我们可以通过align-items: center类应用align-items-center： .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="https://picsum.photos/40/40" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-grow-0" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 align-items-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav> 您还可以考虑通过 text-align: center 类应用 text-center，将链接元素 text 居中： .navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js" integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <nav class="navbar navbar-expand-md fixed-top"> <div class="container-fluid"> <a class="navbar-brand ms-3" href="#"> <img src="https://picsum.photos/40/40" width="40px" class="d-inline-block" /> </a> <form role="search" class="search-bar"> <div class="input-group"> <input class="src-bar" type="search" placeholder="Search For Products" /> <button class="btn bg-white" type="submit"> <i class="fa fa-search"></i> </button> </div> </form> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-colps" aria-controls="nav-colps" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-grow-0" id="nav-colps"> <ul class="navbar-nav me-auto mb-2 mb-lg-0 text-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li> <hr class="dropdown-divider" /> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav>

如何从Chrome扩展程序的选项页面启用/禁用manifest.json CSS内容脚本？

有什么方法可以从 browserAction 或 pageAction 图标禁用/启用 CSS 内容脚本吗？我说的是在

如何用css渐变绘制垂直虚线和实线

如何制作带有 90 度线的 CSS 背景渐变。应该从无线开始，然后是一条实线，接下来的 3 条虚线。

css-in-js 相关问题

最新问题