标注旁边的“对齐”按钮

Question

我如何对齐如图所示的标注旁边的按钮？

这是我的代码：

.calloutS2 {
  position: relative;
  left: 7%;
}

.buttonOkS2 {
  position: relative;
  vertical-align: text-top;
  float: right;
}

.buttonObserve {
  position: relative;
  float: right;
}

<div class="calloutS2" id="callOutStep2"><b><u><font size="5">Step 2:</font></u></b>
  <p class="ps1" id="ps2">
    <font size="4">Length of unknown side =<br>Total length of unknown sides ÷ 2</font>
    <button class="buttonOkS2" id="buttonOkS2"></button>
  </p>
</div>
<div><button class="buttonObserve" id="buttonObserve"></button></div>

Answer 1

将整个内容包装在 No Status: more research and data-gathering is required. 内，然后将其显示为div，这将使您的两个框对齐。

flex

.wrapper {
  display:flex;
  align-items:center;
}
#callOutStep2 {
  border: 1px solid green;
}

Answer 2

使用flex-box可能最容易做到这一点：

.callout {
  display: inline-flex;
  align-items:center;
  background:#eee;
}

.calloutS2 {
  background:#ccffcc;
  border:1px solid green;
  font-size:1em;
  display:flex;
  margin:3px 10px 3px 0;
}
.calloutS2 h1 {
  font-size:1.5em; font-weight:bold; text-decoration:underline;
  margin-top:0;
  
}


.text-wrapper {
  padding:3px;
}
.button-wrapper {
  align-self:flex-end;
  padding:3px;
}
.buttonOkS2 {
  background:red;
  color:white;
  padding:5px;
  border-radius:4px;
}

.buttonObserve {
  background:yellow;
  color:black;
  width:110px;
  height:70px;
  font-size:1.2em;
  border:4px double black;
}

<div class="callout">
  <div class="calloutS2" id="callOutStep2">
    <div class="text-wrapper">
    <h1>Step 2:</h1>
    Length of unknown side =<br>Total length of unknown sides ÷ 2
    </div>
    <div class="button-wrapper">
    <button class="buttonOkS2" id="buttonOkS2">OK</button>
    </div>
  </div>
  <div>
  <button class="buttonObserve" id="buttonObserve">Let's Observe</button>
  </div>
</div>

有关了解flex-box的帮助，请参见css-tricks.com上出色的A Complete Guide to Flexbox。

Answer 3

我认为您可以使用flex轻松实现这一目标。另外，我认为float从来都不是对齐元素的一种优雅方法。

.wrapper {
  display: flex;
  flex-direction: row;
}

#callout {
  height: 75px;
  width: 150px;
  background-color: #CCFFCC;
  padding: 10px;
  margin-right: 10px;
}

.callout-button {
  background-color: #FFFF66;
  border: none;
  padding: 8px;
  height: 40px;
  align-self: center;
}

<div class="wrapper">
  <div id="callout">Callout content</div>
  <button class="callout-button">Let's Observe</button>
</div>

Codepen

Answer 4

您可以使用此代码

sales=pd.read_csv('Downloads/item.csv',sep=',',delimeter='"',error_bad_lines=False,quotechar='"')