Question

我有div和button。该按钮应与div放在同一行。但我无法做到这一点。该按钮显示在下一行。我怎样才能做到这一点？这是我的代码：

<?php
    echo "
        <div class='data'>
            <p id='theData'>Name</p>
        </div>
    ";
?>
<button class="copyBtn" onclick="copyToClipboard('theData')">Copy Data</button>

这些是为数据元素

提供的CSS代码

.data{
    font-size:1.2em;
    color:#000000;
    width:300px;
    height:50px;
    border:2px solid #EF6C00;
    padding-bottom:10px;
}

Answer 1

使用

.data,.copyBtn{
  display:inline-block;
}

＆＃13;

.data,
.copyBtn {
  display: inline-block;
}

.data {
  font-size: 1.2em;
  color: #000000;
  width: 300px;
  height: 50px;
  border: 2px solid #EF6C00;
  padding-bottom: 10px;
}

＆＃13;

<div class='data'>
  <p id='theData'>Name</p>
</div>
<button class="copyBtn" onclick="copyToClipboard('theData')">Copy Data</button>

＆＃13;

Answer 2

<div class='data' style="display: inline-block;">
        <p id='theData'>Name</p>
    </div>
<button class="copyBtn" onclick="copyToClipboard('theData')">Copy Data</button>

Answer 3

将按钮放在div中并浮动两个div。用它所在的div的填充调整按钮的位置。

<!DOCTYPE html>
<html>
    <head>
        <style>
        .data, .buttonWrap {float:left;}
        .buttonWrap {padding:13px 0 0 20px;}
        </style>
    </head>
    <body>
        <div class='data'><p id='theData'>Name</p></div>
        <div class="buttonWrap"><button class="copyBtn" onclick="copyToClipboard('theData')">Copy Data</button></div>
    </body>
</html>

Answer 4

最简单的方法是：

.data{
    display:inline-block;
    font-size:1.2em;
    color:#000000;
    width:300px;
    height:50px;
    border:2px solid #EF6C00;
    padding-bottom:10px;
}

将display:inline-block行添加到您的css规则中，您将获得一个非常简单且可扩展的解决方案。我强烈建议你坚持下去。其他解决方案将涉及添加额外的规则或额外的HTML（在这里查看其他答案的好例子）。

无法在CSS中对齐div和一个按钮

4 个答案: