Question

在我的标题中，我正在尝试将pending-button-notification放在images-cart图片上。出于某种原因，pending-button-notification div显示在标题div的左侧。

有谁知道为什么这不正确？

这是有问题的代码：

<div id="pending-order-button">
    <a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
        <div id="pending-button-notification"></div>
    </a>
</div>

header {
    width: 100%;
    max-width: 100%;
    height: 100px;
    position: relative;
    border-bottom: 1px solid #E5E5E5;
}
#header-wrap {
    width: 90%;
    height: 100%;
    margin: auto 5%;
}
#header-logo {
    width: 200px;
    height: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.header-buttons {
    width: 30px;
    height: auto;
    float: right;
    margin: 30px 40px 0 50px;
    cursor: pointer;
}
.header-buttons:first-child {
    margin-right: 0;
}
#pending-order-button {
    position: relative;
}
#pending-button-notification {
    border-radius: 15px;
    background: #09afdf;
    height: 25px;
    width: 25px;
    position: absolute;
    color: #FFF;
    font-size: 1.3rem;
    top: 5px;
    left: 5px;
    text-align: center;
}

<header>
  <div id="header-wrap">
    <a href="dashboard.html">Logo</a>
    <img src="images/menu.png" class="header-buttons" alt="Pending Orders">
    <div id="pending-order-button">
      <a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
        <div id="pending-button-notification"></div>
      </a>
    </div>
  </div>
</header>

Answer 1

这是导致问题的float:right .header-buttons。

我建议您将其删除并重新浮动#pending-order-button div，以便将其及其所有内容移至右侧。

Answer 2

"dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/contacts": "^3.4.4",
    "@ionic-native/core": "3.4.2",
    "@ionic-native/splash-screen": "3.4.2",
    "@ionic-native/status-bar": "3.4.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.0",
    "ionic-native": "^2.9.0",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },

不放在相对元素

2 个答案: