Question

这是我的代码，并尝试了我想到的所有内容，将我的图片放在顶部中间，右上角有链接。

无论我尝试什么，都不会在同一个div中对齐它们并使事情变得古怪。这是我的代码：

＆＃13;

#header img{
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 90px;
}

.login a{
    float: right;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
}

＆＃13;

<div id="header">
    <img src="img/raystratos.png"/>
    <div class="login">
            <a href="#signup">Sign Up</a>
            <a href="#login">Log In</a>
            <a href="#shoppingcart">Shopping Cart</a>
    </div>
</div>

＆＃13;

Answer 1

尝试绝对定位：

#header { position: relative; }
.login { position: absolute; top: 0; right: 0;}

Answer 2

您可以使用flex执行此操作，如果要将此行划分为3个相等宽度的列，则在容器内添加另一个div，然后将flex：1属性添加到#header内的每个子元素。

＆＃13;

initialize: function (data) { 
  if (!valid(data)) { 
     // don't initialize and return an object
  }
}

＆＃13;

#header {
display: flex;
justify-content: space-between;
}
#header img{
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 90px;
    flex: 1;
}
.equalFlex {
  flex: 1;
}
.login a{
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    flex: 1;
}
.login{
    flex: 1;
}

＆＃13;

无法在div中获取img和链接？

2 个答案: