我浏览了 w3schools.com，在这里进行了搜索，并尝试了多次网络搜索。 我想不通。 我有一个带有样式文本的 div 框。 但我喜欢在同一行上为一个在文本之后结束的按钮覆盖一个对齐文本。 因此，在框内文本左对齐，按钮右对齐，而不会干扰下一行文本，该文本再次意味着在框内左对齐。 此外，每一行文本都有自己的弹出标题，按钮应该有自己的弹出标题，但不断被弹出的行标题覆盖。
<html>
<head>
</head>
<body>
<div style="color:orange; border-style: solid; height: 500px; width: 20%; margin: left; float: right">
<p title="Available food in your area.">Food: <span id="food">Abundant</span>
<span style="align-self: right"><title="Move to a new area. Be careful, it costs growth to move."><button type="button" style="color:green" onclick="move()"><b>Move!</b></button></span></p>
<p title="This is your cells membrane type.">Membrane: <span id="membrane">Bubble</span></p>
</div>
</body>
</html>带css代码的div框。
<div style="color:orange; border-style: hidden; height: 500px; width: 20%; margin: left; float: right">
这是文本的第一行。它工作正常，并在框内正确对齐。它连接了 javascript 代码，但该代码不是问题所在，因此我没有添加它。
<p title="Available food in your area.">Food: <span id="food">Abundant</span>
这是一个按钮。它与第一行文本(上图)相关。我希望它位于文本行的右侧并在框中对齐。它的标题被上面一行代码的标题覆盖了。
<span style="align-self: right"><title="Move to a new area. Be careful, it costs growth to move."><button type="button" style="color:green" onclick="move()"><b>Move!</b></button></span></p>
这是文本的第二行。它正确地左对齐并且它的标题工作正常。
<p title="This is your cells membrane type.">Membrane: <span id="membrane">Bubble</span></p>
我让运行代码片段开始工作并显示了该框。 单击全屏以查看它的外观。 除了按钮应该位于框的右侧。
最佳答案
像这样吗？
<html>
<head>
<title>help</title>
<style>
.dowhatnowparent {
color: orange;
border-style: hidden;
height: 500px;
width: 20%;
float: right;
}
.dowhatnowchild {
color: orange;
border-style: hidden;
float: left;
}
</style>
</head>
<body>
<div class="dowhatnowparent">
<div class="dowhatnowchild">
<span id="food" title="Available food in your area.">Food: Abundant</span>
<div style="float: right;">
<button type="button" style="color: green" onclick="move()" title="Move to a new area. Be careful, it costs growth to move."><b>Move!</b></button>
</div>
<div class="dowhatnowchild">
<span title="This is your cells membrane type." id="membrane">Membrane: Bubble</span>
</div>
</div>
</div>
<script>function move() { alert('ok'); };</script>
</body>
关于html - 如何使用不同的 html 代码设置一行的两个独立部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41685642/