Question

我浏览了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>

我让Run代码段工作并显示了该框。单击全屏查看它是如何正确地设想的。除了按钮被假设在盒子的右侧。

Answer 1

像这样？

<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代码设置一行的两个独立部分？

1 个答案: