Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

导航栏文字前出现意料之外的空格 #113

Closed
HowieHz opened this issue Jun 9, 2024 · 10 comments
Closed

导航栏文字前出现意料之外的空格 #113

HowieHz opened this issue Jun 9, 2024 · 10 comments

Comments

@HowieHz
Copy link
Contributor

HowieHz commented Jun 9, 2024

<li>
</li>
<li>
</li>

两个这样的 li 标签中间就会出现空格

首页
image

文章页
image

页脚
image

HowieHz added a commit to HowieHz/halo-theme-higan that referenced this issue Jun 9, 2024
Co-Authored-By: 风记星辰 <90146186+thyuu@users.noreply.github.com>
@guqing
Copy link
Owner

guqing commented Jun 11, 2024

看起来并没有空格
image
只是最后一个搜索那里会多处这么一个区域,貌似没有没有足够的理由说明这是因为你说的原因导致会出现空格

@HowieHz
Copy link
Contributor Author

HowieHz commented Jun 11, 2024

看起来并没有空格 image 只是最后一个搜索那里会多处这么一个区域,貌似没有没有足够的理由说明这是因为你说的原因导致会出现空格

请对比

<li>
</li>
<li>
</li>

image

<li>
</li><li>
</li>

image

对于这个问题可能的搜索引擎关键字 浏览器渲染行内换行符 li 标签行内有空格

@HowieHz
Copy link
Contributor Author

HowieHz commented Jun 11, 2024

补充
image
image

另外我这样选取文字是按住alt然后鼠标左键拖动选取

@HowieHz
Copy link
Contributor Author

HowieHz commented Jun 11, 2024

首页和页底的用display: flex 也行,文章导航栏的只能display: inline-table,display: inline-flex 会让文字轻微上移

@HowieHz
Copy link
Contributor Author

HowieHz commented Jun 11, 2024

@THYUU 说这种span里套ul li的写法很老了,所以也要找老的方法去解决这个,也就是 display: inline-table。
为了一致性所以三个位置都用 display: inline-table 修改。

@guqing
Copy link
Owner

guqing commented Jun 11, 2024

@THYUU 说这种span里套ul li的写法很老了,所以也要找老的方法去解决这个,也就是 display: inline-table。 为了一致性所以三个位置都用 display: inline-table 修改。

这个主题是迁移的所以没有过多的去修改原来的 html 结构,如果没有什么实质性的影响我不建议去处理这个,可能会造成其他未知的问题

@HowieHz
Copy link
Contributor Author

HowieHz commented Jun 11, 2024

@THYUU 说这种span里套ul li的写法很老了,所以也要找老的方法去解决这个,也就是 display: inline-table。 为了一致性所以三个位置都用 display: inline-table 修改。

这个主题是迁移的所以没有过多的去修改原来的 html 结构,如果没有什么实质性的影响我不建议去处理这个,可能会造成其他未知的问题

好的,我给原主题也提了 issue,不知道作者会做何处理 probberechts/hexo-theme-cactus#388
加 display: inline-table 是在不更改 html 结构,仅通过 css 解决的最佳方案。

@HowieHz
Copy link
Contributor Author

HowieHz commented Jun 12, 2024

@THYUU 说这种span里套ul li的写法很老了,所以也要找老的方法去解决这个,也就是 display: inline-table。 为了一致性所以三个位置都用 display: inline-table 修改。

这个主题是迁移的所以没有过多的去修改原来的 html 结构,如果没有什么实质性的影响我不建议去处理这个,可能会造成其他未知的问题

image
probberechts/hexo-theme-cactus@a15f8ac
image
上游的 issue 被回复了,大概是已经被修复了,是将

<li>
</li>
<li>
</li>

转换为

<li>
</li><li>
</li>

办法来修复这个问题?不是很懂 ejs。

@guqing
Copy link
Owner

guqing commented Jun 12, 2024

上游的 issue 被回复了,大概是已经被修复了,是将
转换为

<li>
</li><li>
</li>

办法来修复这个问题?不是很懂 ejs。

他是通过使用注释来去除 html 结构中的 li 之间的空格来实现的,如果你在意可以自行修改一下,目前我不打算解决,除非是直接重构整个 html 结构

@HowieHz
Copy link
Contributor Author

HowieHz commented Jun 12, 2024

上游的 issue 被回复了,大概是已经被修复了,是将
转换为

<li>
</li><li>
</li>

办法来修复这个问题?不是很懂 ejs。

他是通过使用注释来去除 html 结构中的 li 之间的空格来实现的,如果你在意可以自行修改一下,目前我不打算解决,除非是直接重构整个 html 结构

感谢你的回复❤️

@guqing guqing closed this as completed Jun 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants