Question

我想在同一行显示文本和按钮，我尝试了几种方式，我也搜索了互联网资源，并查看了有关堆栈溢出的类似主题的许多问题。这是我的代码..

<!DOCTYPE html>
<html>
<body>
   <div>Text Here<button id="button" style="float:right">Click Me!</button></div>
</body>
</html>

以下是上述编写代码的输出： Here is the Output of above written code...

Answer 1

停止使用花车。这是你的代码。

<div style="display:flex; justify-content: space-between; align-items: center;">Text Here<button id="button">Click Me!</button></div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

html中的块元素默认显示为：block。在一行中显示它们的最佳方法是：

<!DOCTYPE html>
    <html>
        <body>
            <div><p style="display: inline;">Text Here</p><button id="button">Click Me!</button></div>
        </body>
    </html>

Answer 3

使用display flex。此外，您应在标记中添加文字，然后为标记添加float:left;，为按钮添加float:right;。

Answer 4

<!DOCTYPE html>
<html>
<body>
   <div>Text Here
   <button id="button"  style="float: 'right'">Click Me!</button>
   </div>
</body>
</html>

上面的代码有效。你错过了＆＃39;。

已编辑 - 已添加 -

当您应用其他样式时，它确实有效，例如：

<html>
<body>
   <div style="color:blue;text-align:center; background-color:red">Text Here
   <h1 style="color:blue;text-align:center">This is a header</h1>
   <button id="button"  style="float: 'right'">Click Me!</button>
   </div>
</body>
</html>

你想做什么？尝试解释或绘图，草绘以某种方式帮助我们。

Answer 5

这里提到的所有答案都是这个问题的最终解决方案...... 我正在回答那些将来会提到这个问题的人，谢谢大家:)

.Data
{
   display: inline;
   display: inline;
   line-height: 30px;
   height: 30px;
}
.DataButton
{
   float:right;
   font-family: 'Titillium Web', sans-serif;
   text-transform: uppercase;
   font-size: 20px;
   border-radius: 4px;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   transition-duration: 0.4s;
   -webkit-transition-duration: 0.4s; /* Safari */
   background-color: white; 
   color: black; 
   border: 2px solid #00AABB;
   height: 30px;
}
.DataButton:hover {
    background-color: #00AABB;
    color: white;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="Data">
      Text Here!
      <button class="DataButton">Click Me!</button>
    </div>
  </body>
</html>

内联HTML元素

5 个答案: