Question

我确定这是一个非常简单的解决方案，我无法看到。我希望左侧的第二个按钮在页面上的高度方面低于右侧的第二个按钮，但仍然在左侧。我加入了一个JS小提琴 https://jsfiddle.net/fraserdale/knpvwhad/
感谢您在高级方面的帮助

<div >
    <p>
        <select id="shipping" style="float: right;">
            <option value="-40">UK / AUS $40 </option>
            <option value="-13.95">US $13.95</option>
            <option value="-30">CAN $30</option>
            <option value="0">Free</option>
        </select>


        Shipping:
    </p>
</div>

    <button class="button" onclick="myFunction()">Submit</button>

和CSS

.button {
        background-color: #41ad33;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px 4px 0px;
        cursor: pointer;
    }
    select{
        padding: 15px 9.25px ;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px 4px 0px;
        cursor: pointer;

Answer 1

将按钮设置为块级元素，然后使用clear属性：

.button {
  background-color: #41ad33;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px 4px 0px;
  cursor: pointer;
  display: block;
  clear: right;
}

select {
  padding: 15px 9.25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px 4px 0px;
  cursor: pointer;
}

p {
  font-weight: bold;
}

<div>
  <p>
    <select id="shipping" style="float: right;">
      <option value="-40">UK / AUS $40 </option>
      <option value="-13.95">US $13.95</option>
      <option value="-30">CAN $30</option>
      <option value="0">Free</option>
    </select> Shipping:
  </p>
</div>

<button class="button" onclick="myFunction()">Submit</button>

Answer 2

我建议使用flexbox容器，而不是使用浮点数。使用属性align-items: center;，您可以确保您的选择一直向右对齐。另一个好处是，您可以使用.button { background-color: #41ad33; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px 4px 0px; cursor: pointer; clear:both; } select{ padding: 15px 9.25px ; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px 4px 0px; cursor: pointer; } label { font-weight: bold; } .input-container { display:flex; justify-content:space-between; align-items: center; } <div class="input-container"> <label for="shipping"> Shipping: </label> <select id="shipping"> <option value="-40">UK / AUS $40 </option> <option value="-13.95">US $13.95</option> <option value="-30">CAN $30</option> <option value="0">Free</option> </select> </div> <button class="button" onclick="myFunction()">Submit</button>垂直对齐Flexbox中的项目，这样就无需进一步定位标签。

有关flexbox的详细信息，请参阅：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

for n in multi_list:
    iterating_dict = {}
    for idx,i in enumerate(['x1','x2','y1','y2','id']):
        iterating_dict[i] = n[idx]
    master_list.append(iterating_dict)

Answer 3

使用clear：both属性添加一个新元素，将浮动元素放在右键下方 https://jsfiddle.net/RACCH/13rt8eom/

select max(dt) as dt, count(*) as streak
from (select t1.dt
      ,date(t1.dt,-(select count(*) from t t2 where t2.dt<=t1.dt)||' day') as grp
      from t t1
     ) t
group by grp

如何使元素位于不同的浮动元素下方

3 个答案: