Jekyll 生成 html 有换行问题的代码

Question

我的博客是用jekyll生成的，有代码：

##  Skills

### **Familiar with**
<img align="left" alt="python" height="35px" style="margin:0px 4px" src="/assets/img/skills/python.png" />
<img align="left" alt="anaconda" height="35px" style="margin:0px 4px" src="/assets/img/skills/anaconda.png" />
<img align="left" alt="bash" height="35px" style="margin:0px 4px" src="/assets/img/skills/bash.png" />
<img align="left" alt="numpy" height="35px" style="margin:0px 4px" src="/assets/img/skills/numpy.png" />
<img align="left" alt="pytorch" height="35px" style="margin:0px 4px" src="/assets/img/skills/pytorch.png" />
<img align="left" alt="git" height="35px" style="margin:0px 4px" src="/assets/img/skills/git.png" />
<img align="left" alt="c" height="35px" style="margin:0px 4px" src="/assets/img/skills/c.webp" />
<img align="left" alt="github" height="35px" style="margin:0px 4px" src="/assets/img/skills/github.svg" />
<img align="left" alt="vscode" height="35px" style="margin:0px 4px" src="/assets/img/skills/vscode.png" />
<br>


### **Knowing**
<img align="left" alt="pycharm" height="35px" style="margin:0px 4px" src="/assets/img/skills/pycharm.png" />
<img align="left" alt="vim" height="35px" style="margin:0px 4px" src="/assets/img/skills/vim.png" />
<img align="left" alt="pandas" height="35px" style="margin:0px 4px" src="/assets/img/skills/pandas.png" />
<img align="left" alt="matlab" height="35px" style="margin:0px 4px" src="/assets/img/skills/matlab.png" />
<img align="left" alt="blogdown" height="35px" style="margin:0px 4px" src="/assets/img/skills/blogdown.png" />
<img align="left" alt="RStudio" height="35px" style="margin:0px 4px" src="/assets/img/skills/rstudio.png" />
<img align="left" alt="R" height="35px" style="margin:0px 4px" src="/assets/img/skills/r.png" />
<img align="left" alt="opencv" height="35px" style="margin:0px 4px" src="/assets/img/skills/opencv.png" />
<img align="left" alt="cmake" height="35px" style="margin:0px 4px" src="/assets/img/skills/cmake.webp" />
<img align="left" alt="linux" height="35px" style="margin:0px 4px" src="/assets/img/skills/linux.png" />
<img align="left" alt="Ubuntu" height="35px" style="margin:0px 4px" src="/assets/img/skills/ubuntu.png" /> 
<br>

这样的结果在我的 PC 视图中会很好：

但它在移动视图中效果不佳，例如：

我希望看到在最后一个图标之后会有一个换行符。

谁能帮帮我？非常感谢

Answer 1

这是一个 css 问题，而不是一个 jekyll 或 html 问题，也许你最好在 css 上加标签。要回答您的问题，请尝试将您的图像集包裹在 div 周围，例如：

<div style="display: flex; white-space:nowrap; overflow:auto; ">
<img...
<img...
</div>

参考：How to make a DIV not wrap?

当然，最好的做法是为 div 标签指定一个 class 并将样式放入 CSS 文件中。

Jekyll 生成 html 有换行问题的代码

Jekyll generate html code with newline problem

html

jekyll