我对 HTML 和 CSS 非常陌生，而且我的新 Tumblr 博客的自定义布局遇到了一些问题。
这是博客链接：https://wojakgallery.tumblr.com/
正如您在上面的链接中看到的，我使用包含 6 列的网格来发布帖子。
当我从 PC（而非移动设备）上的浏览器查看时，我看到的问题出现在“提交”和“询问”页面中。
例如，正如您在我的提交页面中看到的，提交框对于内容来说太小（导致您无法完全查看），提交栏框需要更大。
但是，当我编辑 CSS 列数时，下面的“.grid 部分”会影响整个博客上的所有帖子，因此如果我将列数更改为“column-count: 1;”，则会显示博客上的所有帖子在 1 列中。
.grid section {
column-count: 6;
break-inside: avoid;
grid-gap: var(--spacing);
margin-bottom:var(--spacing);
}
如何将“提交”和“询问”页面分开，使其只有 1 列数并居中，同时保留博客上其他正常帖子的“列数：6；”？
有没有办法将特定页面（例如“提交”和“询问”）的 HTML 和 CSS 网格列代码分开？
下面是我博客的完整 HTML 和 CSS 代码。
<!DOCTYPE html>
<!-- A custom theme built by eggdesign's theme builder (buildatheme.tumblr.com) -->
<html>
<head>
<!-- BEGIN: Powered by Supercounters.com -->
<center><script type="text/javascript" src="//widget.supercounters.com/ssl/online_i.js"></script><script type="text/javascript">sc_online_i(1684521,"ffffff","#283966");</script><br><noscript><a href="https://www.supercounters.com/">free online counter</a></noscript>
</center>
<!-- END: Powered by Supercounters.com -->
<title>{Title}</title>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
{block:Options}
<meta name="color:background" content="#fff"/>
<meta name="color:posts" content="#fff"/>
<meta name="color:text" content="#000"/>
<meta name="color:links" content="#000" />
<meta name="color:tags" content="#000" />
<meta name="color:sidebar links" content="{AccentColor}"/>
<meta name="color:search background" content="#fff" />
<meta name="color:search text" content="#000"/>
<meta name="color:borders" content="#ddd"/>
<meta name="text:border width" content="1px"/>
<meta name="text:border radius" content="4px"/>
<meta name="text:font size" content="16px" />
<meta name="image:background" content=""/>
<meta name="color:night mode accent" content="#fff" />
<meta name="if:Remove background image in night mode" content=""/>
<meta name="if:full background" content=""/>
<meta name="select:Font" content="Helvetica" title="Helvetica" />
<meta name="select:Font" content="Roboto" title="Roboto" />
<meta name="select:Font" content="Favorit" title="Favorit" />
<meta name="select:Font" content="Calluna" title="Calluna" />
<meta name="select:Font" content="Fairwater" title="Fairwater" />
<meta name="select:Font" content="Source Code Pro" title="Source Code Pro" />
{/block:Options}
{NewPostStyles}
<script>
const themed = localStorage.getItem('night-mode');
if (themed === "enabled") {
sessionStorage.setItem('night-mode', 'enabled');
document.documentElement.classList.add('night-mode-theme');
}
</script>
<script src="https://static.tumblr.com/svdghan/gFJrolu7g/daynight.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900');
* {
box-sizing: border-box;
}
:root {
--background-image: url({image:background});
--background: {color:background};
--accent: {AccentColor};
--text: {color:text};
--borders: {color:borders};
--spacing: 1rem;
--border-width: {text:border width};
--border-radius: {text:border radius};
--posts: {color:posts};
--tags: {color:tags};
--links: {color:links};
--sidebar-links: {color:sidebar links};
--search-background: {color:search background};
--search-text: {color:search text};
--headerimage: url({HeaderImage});
--invert: invert(0);
--night-mode-accent: {color:night mode accent};
}
.night-mode-theme {
--background: #000!important;
--accent: var(--night-mode-accent);
{block:ifRemoveBackgroundImageInNightMode}
--background-image: url('');
{/block:ifRemoveBackgroundImageInNightMode}
--text: white;
--posts: #222;
--invert: invert(1);
--links: var(--night-mode-accent);
--tags: var(--night-mode-accent);
}
body {
font-family: {select:Font}, sans-serif;
font-size: clamp(.92rem, {text:font size}, 20px);
margin: 0;
height: 100vh;
color: var(--text);
background: var(--background) var(--background-image) center center fixed;
{block:iffullbackground}
background-size: cover;
{/block:iffullbackground}}
a {
color: var(--links);
}
header {
margin:var(--spacing) auto;
max-width:1100px;
padding:var(--spacing);
background:var(--posts);
border: var(--border-width) solid var(--borders);
border-radius:var(--border-radius);
}
article a {
text-decoration: none;
}
article a:hover {
text-decoration: underline;
}
article iframe, .tumblr_video_container {
max-width: 100%;
}
.blog-title {
font-family: {TitleFont};
}
main, .pagination {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-around;
}
main {
max-width:1100px;
margin:auto;
}
article, .pagination {
width: 100%;
position:relative;
max-width: 400px;
margin: calc(var(--spacing) * 4) auto;
border: var(--border-width) solid var(--borders);
border-radius: var(--border-radius);
background:var(--posts);
}
aside .pagination {
margin: var(--spacing) auto auto auto;
}
article img {
max-width: 100%;
}
.link-container {
padding: var(--spacing);
margin:var(--spacing);
border:var(--border-width) solid var(--borders);
border-radius: var(--border-radius);
}
.caption:empty, p:empty {
display:none;
}
.reblog-header a {
display: flex;
align-items:center;
}
.reblog-header img {
padding-right: .4rem;
max-height: 1.4rem;
}
.contained :is(header, footer, main) {
width: 100%;
max-width: 1000px;
margin: 1rem auto;
background: var(--background);
border: var(--border-width) solid var(--borders);
}
.contained header {
margin-bottom: 0;
padding: var(--spacing);
}
.contained main {
height: 70vh;
overflow: auto;
}
.contained article, .contained .pagination {
max-width: 500px;
}
.grid main {
max-width: 98%;
}
.grid section {
column-count: 6;
break-inside: avoid;
grid-gap: var(--spacing);
margin-bottom:var(--spacing);
}
.grid article {
display: inline-block;
max-width: calc(100% - (var(--spacing) / 2));
margin: var(--spacing) 0;
}
.original-post, .reblog-header, .tags, .post-info, .pagination, .quote-container, .replies, .question {
padding: var(--spacing);
}
.reblog-content p, .reblog-content h2, .reblog-content h1 {
margin-left: var(--spacing);
margin-right: var(--spacing);
}
.quote-container, .replies, .question {
border: var(--border-width) solid var(--borders);
margin: var(--spacing);
}
.description, aside h2 {
padding: calc(var(--spacing) /2) 0;
margin: 0;
}
#search-form input {
padding: calc(var(--spacing) / 2);
width:100%;
background:var(--search-background);
margin: calc(var(--spacing) /2) 0 0 0;
border:var(--border-width) solid var(--borders);
border-radius:var(--border-radius);
color:var(--search-text);
}
::placeholder {
color:var(--search-text);
}
.post-info, .like-and-reblog, .contained {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.pinned {
font-weight:bold;
color:var(--accent);
}
.pinned {
font-weight:bold;
}
.pinned-default {
padding:var(--spacing);
}
.like-and-reblog .reblog_button, .like-and-reblog .like_button:not(.liked) {
filter: var(--invert);
}
section {
width: 100%;
}
header {
width: 100%;
}
.pages-container, .nav-container {
margin: calc(var(--spacing) /4) 0;
}
.pages-container a, .nav-container a, .pagination a, .tags a {
display: inline-block;
margin-right: .4rem;
color: var(--text);
text-decoration:none;
}
aside a {
color: var(--sidebar-links);
}
.tags a {
color: var(--tags);
}
.pages-container a {
font-weight:bold;
color:var(--accent);
}
.reblogs a, .caption a {
color:var(--accent);
}
.tumblr_audio_player {
width: 100%;
}
@media only screen and (max-width: 1100px) {
main, .contained main, section {
width: 100%;
height: auto;
}
article {
max-width:90%;
margin: var(--spacing) auto;
}
.grid section {
column-count: 1;
}
}
.screen-reader {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
#daynight-toggle {
cursor:pointer;
background:;
position:fixed;
top:var(--spacing);
left:var(--spacing);
z-index:2;
height:2rem;
width:2rem;
border-radius:50%;
background:white;
display:flex;
border:var(--border-width) solid var(--borders);
flex-wrap:wrap;
justify-content:center;
align-items:center;
}
#daynight-toggle:before {
content:'☀';
}
#daynight-toggle.night-mode-toggle:before {
content:'';
width:1rem;
height:1rem;
transform:translate(-.32rem, -.32rem);
border-radius: 50%;
box-shadow: .32rem .32rem 0 0 black;
}
{CustomCSS}
</style>
</head>
<body class="grid {block:homepage}home{/block:homepage}{block:tagpage}tag{/block:tagpage}{block:searchpage}search{/block:searchpage}{block:submitpage}submit-{/block:submitpage}{block:AskPage}ask{/block:AskPage}-page">
<!-- Day/Night Toggle start <button id="daynight-toggle"><span class="screen-reader">toggle day and night mode</span></button> End -->
<header> {block:ShowTitle}
<a style="text-decoration: none; color:#0c1630;" href="https://wojakgallery.tumblr.com/"><h2 class="blog-title">{Title}</h2></a>
{/block:ShowTitle}
<div class="description">{Description}</div>
<div class="nav-container">
<a href="https://wojakgallery.tumblr.com/"><b>[Home]</b></a>
<a href="https://wojakgallery.tumblr.com/random"><b>[Random Post]</b></a>
{block:askenabled}
<a href="/ask"><b>[Ask]</b></a>
{/block:askenabled}
{block:submissionsenabled}
<a href="/submit"><b>[Submit]</b></a>
{/block:submissionsenabled}
<a href="/archive"><b>[Archive]</b></a>
</div>
{block:HasPages}
<div class="pages-container">
{block:Pages}
<a href="{URL}">{Label}</a>
{/block:Pages}
</div>
{/block:HasPages}
<form action="/search" method="get" id="search-form">
<input type="text" name="q" class="query" value="" placeholder="🔍 Search Tags (type & hit enter)">
</form></header>
<main>
<section>
{block:SearchPage}
<article>
<div class="reblogs">{lang:Found SearchResultCount results for SearchQuery}
<div class="Sorry" style="margin-left:5px;">
{block:NoSearchResults}
<p>Sorry, no listings are tagged with "{SearchQuery}."</p>
{/block:NoSearchResults}
</div>
</div>
</article>
{/block:SearchPage}
{block:TagPage}
<article>
<div class="reblogs">{lang:Showing TagResultCount posts tagged Tag}</div>
</article>
{/block:TagPage}
{block:DayPage}
<article>
<div class="reblogs">{lang:Viewing everything posted on Month DayOfMonth Year}</div>
</article>
{/block:DayPage}
{block:Posts}
<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->
{block:ContentSource}<!-- {SourceURL}
{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
<article id="post-{PostID}">
{block:PinnedPostLabel}<div class="pinned pinned-default"><i></i>{PinnedPostLabel}</div>{/block:PinnedPostLabel}
{block:RebloggedFrom}
<div class="reblog-header">
<a href="{permalink}" {block:isdeactivated}class="inactive"{/block:isdeactivated}>
<img src={ReblogRootPortraitURL-64} alt="{ReblogRootName}"> {ReblogRootName}
</a>
</div>
{/block:RebloggedFrom}
{block:Photo}
<img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos">
{/block:Photo}
{block:Photoset}
{Photoset}
{/block:Photoset}
{block:Panorama}
<img src="{photourl-panorama}" alt="{photoalt}">
{/block:Panorama}
{block:Quote}
<div class="quote-container">
<div class="quote">
"{Quote}"
</div>
<div class="source">
-{Source}
</div>
</div>
{/block:Quote}
{block:Chat}
<ul class="chat">
{block:Lines}
<li>
{block:Label}{Label}{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}
{block:link}
<div class="link-container">
<a href="{URL}">
{Name}
</a>
</div>
{/block:link}
{block:Video}
{Video-700}
{/block:Video}
{block:Audio}
{audioembed}
{/block:Audio}
{block:Answer}
<div class="question">
{Asker}: {Question}
</div>
{block:Answerer}
<div class="replies">
{Answerer}: {Answer}
</div>
{/block:Answerer}
{block:NotReblog}
<div class="replies">
{Replies}
</div>
{/block:NotReblog}
{/block:Answer}
<!-- captions -->
<div class="caption {block:notreblog} original-post {/block:notreblog}">
{block:Text}
{block:Title}<h2>{Title}</h2>{/block:Title}
{/block:Text}
<hr>
{block:notreblog}
{block:caption}{Caption}{/block:caption}
{block:Text}{body}{/block:Text}
{/block:notreblog}
{block:Rebloggedfrom}
{block:Reblogs}
<div class="reblogs">
{block:IsNotOriginalEntry}
<div class="reblog-header">
<a href="{permalink}" {block:isdeactivated}class="inactive"{/block:isdeactivated}>
<img src={PortraitURL-64} alt="{username}"> {username}
</a>
</div>
{/block:IsNotOriginalEntry}
<div class="reblog-content">
{Body}
</div>
</div>
{/block:Reblogs}
{/block:RebloggedFrom}
<hr>
<div class="container">
<div class="topleft">
{LikeButton}</div>
<div class="topright">
{ReblogButton}</div>
</div>
</div>
<!–– START DATE POSTED AND TAGS ––>
{block:Date}<div class="post-info">
<div class="note-info">
<a href="{Permalink}">Posted <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonth}">{TimeAgo}</a> with <a href="{Permalink}"> {NoteCountwithLabel}</a></div>
</div>{/block:Date}
{block:PermalinkPage}
{block:Hastags}
<div class="tags">
{block:Tags}
<a href="{TagURL}">#{Tag}</a>
{/block:Tags}
</div>
{/block:Hastags}
{/block:PermalinkPage}
<!–– END DATE POSTED AND TAGS ––>
{PostNotes}
</article>
{/block:Posts}
{block:Pagination}
<div class="pagination flex centered">
{block:previouspage}
<a href="{previouspage}">Prev</a>
{/block:previouspage}
{block:JumpPagination length="5"}
{block:CurrentPage}
<span class="current-page">
{PageNumber}
</span>
{/block:CurrentPage}
{block:JumpPage}
<a href="{URL}">
{PageNumber}
</a>
{/block:JumpPage}
{/block:JumpPagination}
{block:nextpage}
<a href="{nextpage}">Next</a>
{/block:nextpage}
</div>
{/block:Pagination}
</section></main>
</body>
</html>
额外的自定义CSS：
.blog-title {
font-family: {TitleFont};
font-size: 30px;
}
.pages-container, .nav-container {
margin: calc(var(--spacing) /1) 0;
}
.pages-container a {
background:linear-gradient(to bottom, #290c9d 5%, #290c9d 100%);
background-color:#290c9d;
border-radius:5px;
border:1px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Helvetica;
font-size:17px;
padding:6px; 18px;
text-decoration:none;
text-shadow:0px 1px 6px #283966;
margin-bottom:0px;
margin-top:4px;
background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
background-color:#476e9e;
position:relative;
margin-right:0px;
}
/* LIKE BUTTON AND REBLOG BUTTON START */
.container {
position: relative;
}
.topleft {
position: absolute;
top: 4px;
left: 0px;
font-size: 18px;
}
.topright {
position: absolute;
top: 4px;
left: 25px;
font-size: 18px;
}
/* LIKE BUTTON AND REBLOG BUTTON END */
所以我检查了你的 tumblr 博客，似乎类已经被传递到提交和询问页面，所以你可以通过 css 来定位它们。
我就是这样做的
<style>
/* use this css which is already in the theme to target standard index, post pages etc. */
.grid section {
column-count: 6;
break-inside: avoid;
grid-gap: var(--spacing);
margin-bottom: var(--spacing);
}
/* extend the css for ask/submit pages */
body.submit--page .grid section,
body.ask-page .grid section {
// remove the column-count property
grid-gap: 0;
// add another styles here you only want to target on these pages
}
</style>
这应该可以完成您需要的一切，但只涵盖那两页。
如果您想要一个更全面的解决方案来向任何页面添加类（因此能够专门针对 CSS），请告诉我。但它包含在我链接的其他答案中。
我不确定为什么
submit--pageask-page