CSS/Jade/HTML:框不能正确内联
CSS/Jade/HTML是一组用于网页开发的技术和语言。它们用于定义和布局网页的结构、样式和内容。
CSS（层叠样式表）是一种用于描述网页样式的语言。它可以控制网页元素的外观和布局，包括字体、颜色、边距、背景等。CSS可以通过内联样式、内部样式表和外部样式表来应用于网页。
Jade（现已更名为Pug）是一种模板引擎语言，用于生成HTML代码。它具有简洁的语法和强大的功能，可以帮助开发人员更高效地创建HTML结构。
HTML（超文本标记语言）是一种用于创建网页的标记语言。它定义了网页的结构和内容，包括标题、段落、链接、图像等。HTML使用标签来标记不同的元素，并通过标签属性来设置元素的属性和样式。
关于框不能正确内联的问题，可能是由于CSS样式或HTML结构的问题导致的。以下是一些可能的原因和解决方法：
- CSS样式问题：检查CSS样式表中是否存在与框相关的样式设置。确保框的display属性设置为inline或inline-block，以使其能够正确内联。
- HTML结构问题：检查HTML代码中框的嵌套关系和位置。确保框的父元素没有设置为块级元素，否则框将被强制换行。另外，确保框的宽度适合其容器，以避免被挤出或换行。
- 兼容性问题：不同的浏览器对CSS和HTML的解析和渲染方式可能存在差异。可以使用CSS重置样式表来统一不同浏览器的默认样式，或者使用CSS前缀来适配不同浏览器的特定样式。
总结起来，要解决框不能正确内联的问题，需要检查CSS样式和HTML结构，确保框的样式设置正确，并且没有其他因素导致框无法内联。
相关·内容
1回答
Grunt不监视JS文件
、、、、
我花了一个多小时在这个问题上，仔细研究了几个问题，但答案是找不到的。
在我的javascript文件上使用watch时，我遇到了问题。监视所有其他文件，并正确执行任务。
如果我从一开始就运行默认设置，那么concat和uglify运行的非常好，但是如果我对js文件做了任何更改，watch就会简单地忽略它。
这是我的档案：
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.jso
浏览 3提问于2015-03-27得票数 2
回答已采纳
我正在尝试使用节点邮件发送邮件。通过外部file.External文件html从玉模板中获取html标记是使用文件流编译的，并正确地呈现，而无论是通过maxcdn或cdnjs插入的样式都没有反映出来。
在本例中，如何应用css，或者是否有其他替代方法来实现此场景。
翡翠模板
doctype html
html
head
title Application confirmation
link(rel='stylesheet', type='text/css', href='https://maxcdn.bootstrapcdn.com/
浏览 0提问于2017-03-28得票数 0
我正在尝试配置Grunt，以便每当链接的.css文件发生更改时，引用.css的jade模板也会加载。据我所知，我不能编译我的jade模板，因为有问题的模板正在格式化来自API的响应。因此，除非对.jade文件进行了更改，否则不会再次拉入.css。我可以手动刷新页面以查看样式更改，但我正在尝试将其自动化。
现在，如果我更改了一个.jade文件，有问题的.jade文件就会加载，我可以立即在浏览器中看到模板的更改。如果我更改了.css文件，grunt会检测到它并重新加载.css文件。但是，由于.jade文件已呈现到.html中，因此样式不会更新。
编辑:我已经确定只有包含格式化API调用数据的Jad
浏览 1提问于2015-02-02得票数 1
HTML：
<span id="a">
<span id="b">
<span id="c">
Text
</span>
</span>
</span>
CSS：
#a { display: block; border: 2px solid #e00; }
#b { display: inline-block; border: 2px solid #0e0; }
#c { display: table;
浏览 0提问于2016-03-22得票数 3
回答已采纳
就像stylus中间件在触发路由时自动为模板编译所需的css (在我的例子中是needed )一样，有什么方法可以在路由->中间件流之外自动编译吗？
我有一个构建系统，通过app.render呈现一些html文件，然后将它们保存到文件系统中(许多人对电子邮件模板做类似的操作)。我希望确保当我app.render("foo.jade", func...时，foo.jade所需的任何.css文件都会自动从它们的styl对应方编译。如果我有一个呈现foo.jade的路由，这种情况就会完全自动发生，但在本例中，没有路由。我知道我可以使用stylus' api并调用styl
浏览 0提问于2015-10-15得票数 0
回答已采纳
1回答
Jade file
======
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
div(id="topBar")
h1(id="title") title
form(id ="loginForm",name="input", action="html_form_act
浏览 0提问于2015-11-05得票数 0
我使用Webpack + jade-loader + file-loader预编译了一些Jade代码，并将其存储在一个模块文件中。这个部分工作得很好，但是当我执行存储在上述模块中的函数时，我得到了ReferenceError: Invalid left-hand side in assignment。特别是，它正在抱怨这个includeed文件：
meta(name="viewport", content="initial-scale=1,user-scalable=no,width=device-width")
meta(http-equiv="X-U
浏览 0提问于2018-11-08得票数 0
回答已采纳
因为这是我第一次使用Jade，所以我有很多问题。 我的目标是： 我有一个简单的服务器和一堆票证。这些票证旨在作为一个简单的列表，在其左侧有一个图标，指示该票证的状态(例如已关闭或已打开)。我想使用Jade和Node.js的Express框架来解决这个问题。 这是我到目前为止尝试过的： 玉石布局 <!-- layout.jade -->
doctype html
html
head
title= title
link(rel='stylesheet', href='/src/style.css')
link(rel=
浏览 14提问于2021-10-27得票数 3
回答已采纳
我有这个
jade = ./node_modules/.bin/jade
nlz = ./node_modules/.bin/nlz
build: build/index.js build/index.css build/index.html build/docs.html
build/index.js: $(find client/*.js)
$(nlz) build client/index.js
build/index.css: $(find client/*.css)
$(nlz) build client/
浏览 2提问于2014-04-28得票数 0
回答已采纳
我正在做一个通过网络使用JADE的项目。
请访问了解更多详细信息。
然而，我希望JADE能与一些普通的GUI接口，比如HTML。我的目标是，我想要一台没有安装JADE的计算机，可以通过RPC或任何其他非JADE接口访问JADE网络。我希望我的Q框是正确的，谢谢你的回答！
浏览 0提问于2012-01-13得票数 2
我已经阅读了这两篇文章，对我的问题进行了重新评级：
http://stackoverflow.com/questions/4529586/render-basic-html-view-in-node-js-express
http://stackoverflow.com/questions/12046421/how-to-configure-express-js-jade-to-process-html-files
我的代码如下：
app.engine('.html', require('jade').__express);
app.set('v
浏览 3提问于2013-08-13得票数 3
我有一个Node/Express应用程序，带有一个Jade模板，可以导入一些静态文件。我的玉模板的突出线条如下所示：
layout.jade：
head
link(rel="stylesheet" href="/css/main.css)
script(src="/vendor/jquery.js")
block body
h1 Hello world.
mypage.jade：
extend layout
block body append
p Here another line.
我正在表达我的观点如下：
app.get('
浏览 5提问于2014-02-06得票数 1
回答已采纳
我是个新手，正在学习一个教程。我正在尝试使用jade创建一个地图视图(我知道它现在很难理解，但本教程使用的是jade)。
我的index.js文件夹中有一个路由器请求我的地图页。它查询数据库并以geojson格式返回一些数据。我得到的数据显示在一个单独的页面，所以应该不会有问题。
在index.js中请求地图页面：
//get map page
router.get('/map', function(req, res) {
var client = new pg.Client(conString); // Setup our Postgres Client
cl
浏览 0提问于2017-03-10得票数 0
1回答
我使用JADE模板创建了一个使用express框架的简单节点应用程序。
在学习过程中，一切都进行得很顺利，直到我来尝试运行一些客户端js，但我不知道该如何做。
在我的应用程序/index.js中是否需要做一些事情来告诉节点关于它们的信息？任何帮助都将不胜感激。
谢谢
index.jade
extends layout
block content
h1 Title
script.
console.log("I am running on the client");
app.js
var http = require("http")
var
浏览 3提问于2015-04-30得票数 4
回答已采纳
1回答
我有一个存储在SASS变量$colors中的颜色数组，我正在使用Styledown，我可以让SASS和Jade在同一个页面上生成一些很好的文档。
唯一的主要缺陷是我不能在Jade中使用SASS变量，这会产生很多重复的代码。
例如：
我将一个颜色数组存储在一个名为$colors的SASS变量中，并循环遍历它，生成相关的CSS。
我希望能够遍历相同的$colors变量，并使用Jade (或其他语言，如果可能的话)生成一些相关的HTML示例。但是我做不到，我必须创建一个Jade-$colors数组来完成这个任务。如果SASS-$colors改变了，我必须记住也要改变Jade-$colors的内容。
浏览 3提问于2016-11-30得票数 2
1回答
我正在尝试用Node/Express/Jade/Stylus开发一个应用程序。
问题是Jade不会呈现包含的文件的内容。
以下是这些文件：
layout.jade：
doctype 5
html
block head
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
header
block header
#main-container
block content
footer
bl
浏览 4提问于2013-11-08得票数 1
回答已采纳
我的github页面的css生成为
，但在index.html中它指向
我正在使用带有Gulp和SASS的Jekyll。我知道这在真正的.com域上可以很好地工作，但是我如何在GitHub页面上使其正确呢？
我的gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var prefix = require('gulp-auto
浏览 0提问于2015-11-21得票数 3
回答已采纳
3回答
我正试着在Jade中正确地呈现这个html代码
<h1>Hello<small> world</small></h1>
不幸的是，我尝试过的每一件事都不起作用。
我尝试过将small内联，但它不起作用。我尝试在新行中添加small，但在h1标记中没有嵌套small。
浏览 1提问于2014-08-15得票数 11
回答已采纳
我一直在为另一个开发者清理一个项目。但是，与其在PHP中直接使用HTML，我更愿意使用Jade。 这是在使用CodeIgniter，问题是下面这行： link(href='<?php echo base_url(); ?>css/bootstrap.min.css', rel='stylesheet') 从Jade转换为PHP的输出结果是这样的，而不是路径： <link href="<?php echo base_url(); ?>css/bootstrap.min.css" rel="st
浏览 9提问于2019-02-21得票数 2
回答已采纳
嗨，我是HTML和CSS世界中的新手，所以我只想问一下html代码流是如何工作的，特别是html与内部CSS的工作，所以我记得代码是从上到下开始的，给出了以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta>.......
<title>Document</title>
<style>
.container {background-color: tomato; padding: 20px;}
.te
浏览 3提问于2022-11-19得票数 1
我现在使用的是jade- HTML -laoder，但是当我运行webpack的watch命令时，HTML文件的结果中嵌入了所有的javascript代码。
这是我的webpack.config.js
var webpack = require('webpack'),
BrowserSyncPlugin = require('browser-sync-webpack-plugin'),
html = require('jade-html-loader'),
path = require('path');
浏览 1提问于2016-01-21得票数 1
1回答
我正在尝试使用Grunt中的w3c validator插件来验证一个简单的HTML文件。它在line 33上给我一个unexpected identifier错误。我不知道我错在哪里。
我知道如何使用grunt-html-validation插件，但是不能让grunt-w3c-validation插件工作。
我正在尝试验证的HTML：
<!doctype html>
<html>
<head>
<title> I will see </title>
</head>
<body>
浏览 0提问于2015-06-19得票数 0
1回答
出于某种原因，我所做的任何事情都不能让它正常工作。
Layout.jade文件
doctype html
html
head
title= title
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')
link(rel='styelsheet', href='https://fonts.googleapis.com/css?fami
浏览 2提问于2016-09-13得票数 0
我有这个jade文件：
!!! 5
html
head
title test include
style(type='text/css')
//- DOES NOT WORK!
include test.css
body
//- works
include test.css
div
//- works
include test.css
输出：
$ jade -P test.jade
rendered test.html
$ cat test.html
<!DOCTYPE h
浏览 0提问于2012-05-15得票数 10
回答已采纳
1回答
如何将下面的html翻译成jade？
<div id="app" ng-app="myApp" class="{@ .CSS @}">
htm2jade给出了
#app.{@..CSS.@}(ng-app='myApp')
bur jade将其渲染为
<div id="app">.{@..CSS.@}(ng-app='myApp')
如何将html的第一行表示为jade。
谢谢。
浏览 0提问于2013-07-13得票数 0
回答已采纳
2回答
我试着只使用普通的Node.js，除了用于教育目的之外，没有其他框架。我目前有这样的设置：
var fs = require('fs'),
jade = require('jade');
function compile(dirPath, res) {
var filePath = __dirname + dirPath;
fs.readFile(filePath, 'utf8', function(err, fd) {
var fn = jade.compile(fd, { filename: filePa
浏览 0提问于2013-04-04得票数 1
回答已采纳
1回答
我有一个类似如下的Jade模板：
extend layout
svg#testing
defs
pattern#flowers(patternUnits="userSpaceOnUse" width='276px' height='183px')
image(xlink:href='/img/flowers.jpg', height='183px' width='276px' )
div
circle#circle(cx=50 cy
浏览 4提问于2015-04-18得票数 0
我使用和生成一个静态的html原型，但是与位于子目录中的玉模板中的css文件等资产的相对链接存在问题。
因为这是一个原型，团队成员应该能够快速地查看它，
只要使用没有进一步配置的浏览器，这些文件就可以开箱即用。
不使用服务器。
文件应该可以在不同的机器上查看。
项目结构
源文件夹结构如下所示：
src
|
|--first.jade
|
|--subdirectory
| `--second.jade
|
|--templates
| |--layout.jade
| `--head.jade
|
`--css
`--styles.css
first.jade和
浏览 8提问于2014-12-21得票数 2
有如下内容(改编自OReilly的模块和与webpack 的资产捆绑)
const viewout = document.querySelector(".view");
const view = require('raw!jade-html?pretty=false!../views/index.jade');
viewout.innerHTML = view;
这是可行的，但我想在我的webpack配置玉器。因此，我尝试将以下内容添加到加载器数组中：
{
test: /\.jade$/,
include: [
Path
浏览 5提问于2016-04-28得票数 1
回答已采纳
2回答
我正在尝试使用jade模板创建一个模块化布局。我想将一个脚本块从子元素添加到它的父元素中。我不太确定这是否可能。
这是我的结构
layout.jade
head.jade
index.jade
users.jade
layout.jade:文档类型html#html包含标头
body
block content
head.jade：
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
block scripts
index.
浏览 2提问于2012-11-25得票数 10
1回答
我的问题是，当我正在用gulp编译Jade时，HTML中的一些标记最终出现在同一行上。为了这件事
结果是这样的
我想让它看起来像那样。是可能的吗？
这是我的卷宗
gulp.task('templates', function() {
var YOUR_LOCALS = {};
gulp.src('./*.jade')
.pipe(jade({
pretty: true,
locals: YOUR_LOCALS
}))
.pipe(gulp.dest('./'))
});
浏览 3提问于2016-04-16得票数 0
回答已采纳
我正在尝试使用Jade块，但我的内容无法显示。这是我的index.jade
//index.jade
extends ../includes/layout
block main-content
section.content
div(ng-view)
正如我所期望的那样，它正在添加layout文件。以下是该文件：
//layout.jade
doctype html
html
head
link(href="/favicon.ico", rel="shortcut icon",type="image/x-icon")
浏览 3提问于2014-02-05得票数 5
我想调用google api并在一个jade文件中执行它。有可能做这样的事情吗？
有没有等价物
include myjs.jade
但是像这样的东西：
include https://apis.google.com/js/client.js?onload=init
我的目的不是包括
<script src'https://apis.google.com/js/client.js?onload=init'/>
在我的html中，但呼叫google shortner，因为它帮助我在提供html之前构建我的html。(在我的html中，
浏览 1提问于2015-03-16得票数 0
我刚开始使用gulp，我正在尝试连接和缩小我的JS和CSS文件。我用的是翡翠。
gulpfile.js
gulp.task('jade2html', function() {
return gulp.src('app/*.jade')
.pipe(jade({pretty: true}))
.pipe(gulp.dest('dist'));
})
gulp.task('useref', function() {
return gulp.src('app/*.jade')
.pipe
浏览 8提问于2016-06-09得票数 0
回答已采纳
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(src="/javascripts/jquery-2.1.1.js")
script(src="/javascripts/global.js")
body
block content
显然，src="/../public/javascri
浏览 0提问于2014-05-19得票数 1
回答已采纳
如果我正确理解了这个过程，那么在第一个GET请求时，我会让flask提供一个页面(html和css)。客户端将只接收数据，并使用已存储的html (部分/其他页面)来修改站点。
理想情况下，我想使用一些比html语法更好的东西，比如slim，haml或jade。
假设上面的是正确的，我的困惑是如何使用pyjade (或任何类似的工具)和flask来转换客户端应用程序将使用的部分。
var app = angular.module('App')；
app.config(function($routeProvider){
$routeProvider.when('/
浏览 3提问于2015-04-08得票数 0
当我在vim中编辑我的.jade文件时，我想要有2个空格缩进。我下载了vim中用于.jade处理的配置文件，但它们似乎不起作用。所有文件夹都位于/home/name/.vim中，每个文件夹都有jade.vim配置文件。不过，它们并不起作用。我是否需要更改/ .vimrc /name中的主名称？
编辑：
autocmd BufRead,BufNewFile *.html setlocal ft=html
autocmd BufRead,BufNewFile *.js setlocal ft=js
autocmd BufRead,BufNewFile *.jade setlocal ft=jade
浏览 0提问于2011-05-25得票数 2
回答已采纳
我刚接触jade，我真的很纠结于它，我创建了一个简单的拖放表系统，但由于某些原因，我不能在Jade中使用我的脚本文件。我有一个css和一个JS文件，并且我都链接到了jade文件，由于某些原因，只有css是正确连接的…
script(src='routes/dragdrop.js' type='text/javascript')
这是对"dragdrop.js“文件的引用，我将其放在body标记的末尾。控制台日志为我提供了以下信息：
GET /routes/dragdrop.js 404 20.949 ms - 507
这里可能出了什么问题？
浏览 2提问于2018-07-03得票数 0
我想这样做:我有一个可以生成css链接的mixin，我想在一个模板文件中声明它，我想在主jade文件中声明mixin的参数。
mixins.jade
mixin includeCss(...cssFiles)
each file in cssFiles
link(rel="stylesheet", href=file)
布局/template.jade
doctype html
html(lang="en")
head
+includeCss(cssIncludes)
index.jade
extends ./la
浏览 0提问于2015-08-16得票数 0
1回答
我正在尝试使用Bootstrap呈现一个简单的HTML，但是label组件不能正确显示。以下是代码的简化版本：
<html>
<head>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<span class="label label-success">
浏览 0提问于2014-04-23得票数 1
我有一个Node.js express web应用程序。
layout.jade看起来像这样
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
block extraHeader
body
block content
我的map.jade看起来像这样：
extends layout
block extraHeader
link(rel='stylesheet' href=
浏览 61提问于2018-06-28得票数 0
回答已采纳
我正在使用M.E.A.N堆栈构建和应用程序。
我正在使用Angular Ui Router进行路由，我似乎在正确路由部分参数时遇到了问题。
使用以下命令可以成功调用主视图的链接：
.state("framework", {
url:"/genetic",
templateUrl: "/partials/framework/main.html",
css: "/stylesheets/genetic/global/main.css"
})
但是，当我尝试使用相同的格式调用partial时，我遇到了
浏览 0提问于2016-05-11得票数 3
2回答
我正在尝试按照这个google页面中的建议来优化CSS交付：
然而，我甚至不能用Jade重现它们的基本示例。以下代码不起作用：
html
head
title= title
meta(name='viewport' content='width=device-width, initial-scale=1.0')
style(type='text/css')
.blue{color:blue};
body
nav(class='navbar navbar-default navbar
浏览 0提问于2015-01-08得票数 0
我正在使用带有Piler的Node.js ()。项目网站上的示例展示了如何在index.jade文件中使用Piler。
index.jade：
!!! 5
html
head
!{css}
!{js}
body
h1 Hello Piler
当索引文件被传送到客户端时，!{css}和!{js}标签将被转换为相应的html标签。
例如：<script type="text/javascript" src="myscript.js"></script>
如何在没有index.jade文件而使用index.htm
浏览 1提问于2013-03-28得票数 2
3回答
链接css文件在玉器中的不加载
、、、、
这就是我的目录结构
--votingApp
app.js
node_modules
public
css
mystyle.css
views
test.jade
mixins.jade
我用mixins.jade编写了一些通用模块。test.jade是主要文件。“biolerplate”、“nav”、“nav item”是混合文件中的不同块。这就是test.jade的样子
include mixins
doctype html
html(lang="en")
head
浏览 4提问于2016-06-09得票数 2
回答已采纳
3回答
对于我正在开发的单个页面应用程序，我有以下结构：
dist
css
js
库
部分数
index.html
钢筋混凝土
css
js
库
视图
部分数
index.jade
快捷服务器将使用目录dist为项目服务。我有一些琐碎的琐碎任务(使用grunt - cleaning，grunt-cont肋骨-copy)来清除dist，并将src/css、src/js、src/lib复制到dist<code>E 247</code>。
问题在于src/views。此目录包含需要编译
浏览 0提问于2012-12-30得票数 11
回答已采纳
我使用gulp来创建。我使用浏览器同步来查看我的页面预览。但我无法将gulp配置为自动重新加载。当我在浏览器中进行更改时，我只能手动重新加载jade文件。我使用CSS并将其编译为SCSS，如果自动更改...
哪一个是我的错误，为什么不在预览中重新加载我的jade或html文件？
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var jade = require('
浏览 2提问于2016-01-03得票数 0
我在dashboard.jade中有一个包含header.jade文件的包含标记，但是header.jade文件有自己的样式表，当我运行它时，dashboard.jder的样式表也适用于包含的header.jade。是否有一种方法可以使dashboard.jder的样式表只应用于它，而不适用于包含的header.jade？
下面是我的dashboard.jade代码：
doctype html
html
head
title Todo List
| 	
|
link(rel='stylesheet', type
浏览 0提问于2016-07-26得票数 0
回答已采纳
我已经环顾了一下，但我甚至不确定我想要的是可能的。
app.js
...
var routes = require('./routes/index');
...
app.use('/', routes);
...
index.js
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', {
title: 'Test',
headersheet: 'head
浏览 1提问于2016-02-27得票数 1
回答已采纳
我正在制作一个静态网站使用温特史密斯与和插件。
我想在帮助页面中添加一个特定的CSS文件。帮助页基于“布局”模板。当我试图使用一个块将样式表插入到html头部时，我会收到以下错误：
Line ##: Unexpected identifier
layout.jade
doctype html
html
head
block head
link(rel="stylesheet" href="/styles/layout.css")
body
...
help.jade
---
template: layout.ja
浏览 0提问于2014-09-27得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
