我有我的网站导航列表项目,我需要居中.我是浮动的,所以我可以在列表项上填充...将它们设置为内联似乎消除了顶部和底部填充.
<style type="text/css">
#nav {
width:100%;
}
#nav ul {
margin-right: auto;
margin-left: auto;
}
#nav ul li {
float: left;
background-color: #333;
color: #fff;
padding: 15px;
margin: 10px;
}
</style>
<div id='nav'>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
通过查看Gatsby文档，他们建议您可以像在其他任何地方一样引用背景图像：
.image {
background-image: url(./image.png);
}
他们没有涵盖的是这些图像应该存放的位置。我尝试将图像目录放置在src文件夹，布局文件夹和根文件夹中，但是我不断收到错误消息：
Loader /Users/username/Sites/my-app/node_modules/url/url.js?{"limit":10000,"name":"static/[name].[hash:8].[ext]"} didn't return a function
@ ./~/css-loader!./~/postcss-loader!./src/layouts/index.css 6:400-435
使用Gatsby引用背景图像的正确方法是什么？
当前目录结构：
my-app
- src
-- images
--- image.png
-- layouts
--- index.css
我试图在body.
现在我有这个：
// Prepend vsr-toggle
var vsrToggle = document.createElement("div");
vsrToggle.innerHTML = "<input type='checkbox' name='sr-toggle' id='srToggle'><label for='srToggle' role='switch'>Screen reader</label>"
document.body.insertBefore(vsrToggle, pageContent);
它工作正常，因为 HTML 被添加到创建的div. 但是，我需要在前面添加此元素而不将其包装在 div 中。
有没有一种方法可以在不先创建元素的情况下添加 HTML？如果没有，我可以将 the 创建input为自关闭元素并将其附加label到它吗？
有更好的方法来实现这一目标吗？
干杯!
是否可以在SVG元素中垂直居中路径？
这是我需要集中的路径之一:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144"><path d="M127.782 40.348H15.802c-3.813 0-6.912 3.002-6.912 6.766v14.113c0 3.235 1.52 6.11 3.953 7.92h-.012s52.9 35.873 53.09 36c1.56.978 3.82 1.886 5.82 1.886 2.21 0 4.25-.71 5.9-1.886l52.54-35.675c2.69-1.78 4.494-4.81 4.494-8.246V47.194c0-3.772-3.07-6.846-6.885-6.846zm-38.05 29.864c-.066 1.966-.685 3.392-2.68 3.392H64.744c0 4.482 4.56 6.735 8.77 6.735 7.825 0 9.407-4.4 12.117-3.34 1.49.58 2.14 1.62 2.11 3.62-.08 4.48-5.292 7.864-14.94 7.864-11.637 0-19-6.573-19-17.353 0-10.31 7.63-17.88 18.184-17.88 10.465 0 17.757 7.04 17.757 16.74v.215zm-17.91-8.494c-3.434 0-6.28 2.284-6.695 5.597h13.47c-.068-3.45-3.116-5.597-6.776-5.597zm-.087 53.697c-3.328-.038-6.947-1.51-8.567-2.805L8.86 75.7v52.492c0 3.764 3.065 6.808 6.88 6.808h111.983c3.824 0 6.944-3.044 6.944-6.808v-52.49L80.53 112.61c-2.586 1.832-5.636 2.84-8.795 2.805z"/></svg>
我想在页面中放置一个按钮,它将在iOS和Android中调用新的浏览器内共享功能.这可能吗？
我正在尝试将图像插入使用Stencil构建的Web组件中。
我遇到2个错误：
AppLogo is declared but its value is never read.
和
Cannot find module ../assets/logo.svg.
目录：
- src
-- components
--- app-header
---- assets
----- logo.svg
---- app-header.tsx
---- app-header.scss
---- app-header.spec.ts
码：
import { Component } from "@stencil/core";
import AppLogo from "../assets/logo.svg";
@Component({
tag: "app-header",
styleUrl: "app-header.scss"
})
export class AppHeader {
render() {
return (
<header class="app-header">
<a href="#" class="app-logo">
<img src="{AppLogo}" alt="App Name" />
</a>
</header>
);
}
}
（我可以找到）关于此的大量文档。因此，感谢您的帮助。
我正在寻找一个"过滤输入字段",它消除了与输入不匹配的页面中的图块.
到目前为止我有这个......
HTML -
<input name="filter" type="text" value="Find who you're looking for" />
<a href='#' id='b_submit'>Submit</a>
<article id='JohnS'>Content</article>
<article id='BobG'>Content</article>
<article id='SamL'>Content</article>
<article id='RonaldY'>Content</article>
脚本 -
$("#b_submit").click(function() {
var filter_text = $('input:text').val();
//this sets filter_text as the input value
$('article:not(??not sue what to call here??)').fadeOut();
//this is where I need help, I need to call the value as an #id to eliminate non-matching articles.
});
这样做的正确语法是什么？我是否过于复杂的简单过滤？救命？:d
我正在使用Jekyll创建页面,文档建议Jekyll可以选择在根目录中创建页面,或者为新页面创建新目录.
来自http://jekyllrb.com/docs/pages/
您为页面放置HTML文件的位置取决于您希望页面的工作方式.创建页面有两种主要方式:
- 为站点的根文件夹中的每个页面放置命名的HTML文件.
- 在站点的根目录中为每个页面创建一个文件夹,并在每个页面文件夹中放置一个index.html文件.
project
-- _includes
-- _site
---- about
------ index.html
----assets
------ css
------ img
------ js
--assets
---- css
---- img
---- js
-- _config.yml
-- about.html
-- index.html
如何配置Jekyll在根目录中创建页面？
我是写公式来操纵数据的新手。我正在使用Airtable收集调查反馈，并根据提供的2个得分为每个响应分配一个类别。每个或两个分数可以是-4，-2、0、2或4。根据分数的组合，响应将进入六个类别之一。
为此，我编写了一个If / And公式（可以运行），但是我想知道是否有更简单，更简洁的方法来实现此目的：
IF(AND({Functional score}=4,{Dysfunctional score}=4),"Q",
IF(AND({Functional score}=-4,{Dysfunctional score}=-4),"Q",
IF(AND({Functional score}=2,{Dysfunctional score}=2),"Q",
IF(AND({Functional score}=-2,{Dysfunctional score}=-2),"Q",
IF(AND({Functional score}=0,{Dysfunctional score}=0),"I",
IF(AND({Functional score}=4,{Dysfunctional score}=2),"A",
IF(AND({Functional score}=4,{Dysfunctional score}=0),"A",
IF(AND({Functional score}=4,{Dysfunctional score}=-2),"A",
IF(AND({Functional score}=4,{Dysfunctional score}=-4),"P",
IF(AND({Functional score}=2,{Dysfunctional score}=4),"R",
IF(AND({Functional score}=2,{Dysfunctional score}=0),"I",
IF(AND({Functional score}=2,{Dysfunctional score}=-2),"I",
IF(AND({Functional score}=2,{Dysfunctional score}=-4),"M",
IF(AND({Functional score}=0,{Dysfunctional score}=4),"R",
IF(AND({Functional score}=0,{Dysfunctional score}=2),"I",
IF(AND({Functional score}=0,{Dysfunctional score}=-2),"I",
IF(AND({Functional score}=0,{Dysfunctional score}=-4),"M",
IF(AND({Functional score}=-2,{Dysfunctional score}=4),"R",
IF(AND({Functional score}=-2,{Dysfunctional score}=2),"I",
IF(AND({Functional score}=-2,{Dysfunctional score}=0),"I",
IF(AND({Functional score}=-4,{Dysfunctional score}=4),"R",
IF(AND({Functional score}=-4,{Dysfunctional score}=2),"R",
IF(AND({Functional score}=-4,{Dysfunctional score}=0),"R",
IF(AND({Functional score}=-4,{Dysfunctional score}=-2),"R",
"Q"))))))))))))))))))))))))
谢谢您的帮助！