如何在 HTML 中将不同的文本位放在同一行而不影响彼此？
[英]How do I have separate bits of text in HTML on the same line without them affecting one-another?
问题描述
I'm wanting to create a mini-website to gain a general grip on how to code in HTML/CSS, and I've decided to make a main box with a sidebar, and when I try to create two separate portions of text on the same line under different tags, it automatically moves down a line and affects the position of the other tag, making the whole (albeit very simple) site look like a mess.
我想创建一个迷你网站来全面了解如何使用 HTML/CSS 进行编码，并且我决定制作一个带有侧边栏的主框，当我尝试在上创建两个单独的文本部分时同一行在不同标签下，它会自动下移一行并影响另一个标签的 position，使整个（尽管很简单）站点看起来一团糟。
The code which I tried looks like this:我试过的代码如下所示：
.insidebar{ float: right; margin-right: calc(33.5%); position: relative; }
<ul><a href="https://rateyourmusic.com/~Xerunox">my rym!!</a></ul><p class="insidebar">test</p ```
Note the second piece of text is what I'm trying to move into the sidebar, if that information is needed.请注意，如果需要该信息，第二段文字就是我要移入侧边栏的内容。
Since my knowledge is quite limited, please try and simplify a lot of the wording.由于我的知识非常有限，请尽量简化很多措辞。
2 个解决方案
解决方案1
0 2022-12-05 19:54:18
To be honest, from the description, I'm still not sure I understand what you want to achieve but let me try to give some hints.老实说，根据描述，我仍然不确定我是否理解你想要实现的目标，但让我试着给出一些提示。
ul and p are block elements meaning they will be one above the other, even if in HTML you write them in one line. ul 和 p 是块元素，这意味着它们将一个在另一个之上，即使在 HTML 中你将它们写在一行中。
Also, using floats to make layouts is an outdated practice.此外，使用浮动进行布局是一种过时的做法。 Better read about flexbox.最好阅读 flexbox。
Also, you're using tag but you actually don't have a list.另外，您正在使用标签，但实际上没有列表。 Why that tag then?为什么那个标签呢？
To make a layout with a main box and a sidebar I'd have a container for both of them.要制作带有主框和侧边栏的布局，我需要为它们都准备一个容器。 In that a div that would be the sidebar and another one that would be the main div.其中一个 div 作为侧边栏，另一个 div 作为主 div。
And the text I want in the main div I would put inside that, and whatever is supposed to be in the sidebar would go inside that div.我想要在主 div 中放置的文本会放在其中，侧边栏中应该包含的任何内容都会在该 div 中放置 go。
解决方案2
0 2022-12-05 19:57:07
I don't know how how your whole layout should look like, but a safe way to achieve a main vs sidebar approach in contemporary HTML/CSS is with the flexbox model:我不知道你的整个布局应该是什么样子，但在当代 HTML/CSS 中实现主栏与侧边栏方法的安全方法是使用flexbox model：
* { box-sizing: border-box; } html { height: 100%; } body { font-family: sans-serif; margin: 0; display: flex; height: 100%; } aside { width: 200px; background-color: dodgerblue; padding: 1rem; } main { flex: 1; background-color: orange; padding: 1rem; }
<body> <aside> <h2>This is the aside section</h2> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </aside> <main> <h1>This is the main section</h1> <p>Welcome to this document</p> </main> </body>
By setting display: flex on the <body> , you are positioning its children next to each other horizontally (being row the default flex-direction ).通过在<body>上设置display: flex ，您可以将其子项水平放置在一起（默认为row flex-direction ）。
Inside each body child, elements are arranged vertically (default block model).在每个 body child 中，元素垂直排列（默认块模型）。
Floats are a reminder of the pre-flexbox era, are confusing and should be avoided nowadays.浮动是前 flexbox 时代的提醒，令人困惑，现在应该避免。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.