Question

我正在尝试设计一个包含四个选项的菜单项列表，其中三个始终存在：

项目
价格
超越from bs4 import BeautifulSoup import requests print('step 1') #get url page_link = "<random website with info>" print('step 2') #open page page_response = requests.get(page_link, timeout=1) print('step 3') #parse page page_content = BeautifulSoup(page_response.content, "html.parser") print('step 4') #naam van de pagina naam = page_content.find_all(class_='<random class>')[0].decode_contents() print('step 5') #printen print(naam)
订购按钮

我不知道如何始终确保将 Order 按钮固定在列表的末尾，以便为缺少的选项分配空间

//optional

.menu-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: space-between;
}
.menu-item #menu-item-form {
  display: none;
}
.menu-item .item {
  flex-basis: 50%;
}
.menu-item .fill {
  flex-basis: 10%;
}
.menu-item button{

  flex-basis: 20%;
  align-self: flex-end;
}

Answer 1

对代码justify-content: space-between;的较小更新可解决此问题：）

.menu-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.menu-item #menu-item-form {
  display: none;
}
.menu-item .item {
  flex-basis: 50%;
}
.menu-item .fill {
  flex-basis: 10%;
}
.menu-item button{
  flex-basis: 20%;
}

<li class="menu-item">
  <div class="item">Chicken Burger</div>
  <span class="fill price">1350.00</span>
  <button class="order-btn" form="menu-item-form" type="submit">Add to Order</button>
</li>

为可选的弹性项目分配空间

1 个答案: