如何让 html 标签落在同一行？
[英]How to get html tags to fall on the same line?
问题描述
I want to write HTML code which displays some text and then, immediately after that, an arrow icon (on the same line).
我想编写 HTML 代码，它显示一些文本，然后立即显示一个箭头图标（在同一行）。
This is what I have so far:这是我到目前为止所拥有的：
<h1>hello</h1><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0.708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg> This is what the front end looks like:这是前端的样子：
As seen in the picture, the arrow icon gets automatically placed on a newline.如图所示，箭头图标自动放置在换行符上。 I want it on the same line as the text saying "hello".我希望它与“你好”的文字在同一行。 I've already tried using the nobr tag but that didn't seem to do the trick.我已经尝试过使用 nobr 标签，但这似乎没有奏效。 Thanks.谢谢。
3 个解决方案
解决方案1
1 已采纳 2022-09-20 21:00:15
You could wrap it in a div which has a flex styling您可以将其包装在具有flex样式的 div 中
<div style="display: flex; align-items: center;"><h1>hello</h1><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0.708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg></div>解决方案2
0 2022-09-20 21:03:18
You can make the svg an inline element with the style="display: inline;"您可以使用 style="display: inline;" 使 svg 成为内联元素
<h1>hello</h1><svg sytle="display: inline;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/></svg>
解决方案3
0 2022-09-20 21:50:11
The best solution for your problem is to use the flex property: display: flex .您的问题的最佳解决方案是使用 flex 属性： display: flex 。 and also, you can use the inline property: display: inline .而且，您可以使用内联属性： display: inline 。
<div style="display: flex; align-items: center;"> <h1 style="padding: .5rem"> hello </h1> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16" > <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0.708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" /> </svg> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.