为什么内联块对我的代码不起作用？

问题描述 投票：0回答：2

我将 inline-block 设置为 div 但它不起作用，只有 inline-flex 有效

我想要像下面这样的结果，但只有当我设置 inline-flex 时它才是丰富的

enter image description here

#account_corner {
    display: inline-block;
    position: relative;
    vertical-align: top;
    float: none;
    white-space: nowrap;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Account corner</title>
  </head>
  <body>
    <div id="account_corner">
      <img style="height: 40px;" alt="account_photo" src="https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o=">

      <div style="display: block;">
        <span style="margin: 0 5px;">Example</span>
        <p style="margin: 0 5px;">[email protected]</p>
      </div>

      <button onclick="/logout'">Logout</button>
    </div>
  </body>
</html>

html css
2个回答
1
投票

正如 Amaury 评论的那样，您需要将显示应用到您想要成为内联元素的每个子元素。

#account_corner {
    display: block;
    position: relative;
    vertical-align: top;
    float: none;
    white-space: nowrap;
}
.inline {
    display: inline-block;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Account corner</title>
  </head>
  <body>
    <div id="account_corner">
      <img class="inline" style="height: 40px;" alt="account_photo" src="https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o=">

      <div class="inline">
        <span style="margin: 0 5px;">Example</span>
        <p style="margin: 0 5px;">[email protected]</p>
      </div>

      <button class="inline" onclick="/logout'">Logout</button>
    </div>
  </body>
</html>

0
投票

您可以这样使用：

  • 使用选择器
    > *
    为所有第一级元素设置样式。您可以在此处设置显示和垂直对齐。

但是，使用 flex/grid 布局会更好，因为你可以更好地控制。

内联块

#account_corner {
    position: relative;
}

#account_corner > * {
  display: inline-block;
  vertical-align: top;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Account corner</title>
  </head>
  <body>
    <div id="account_corner">
      <img style="height: 40px;" alt="account_photo" src="https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o=">

      <div>
        <span style="margin: 0 5px;">Example</span>
        <p style="margin: 0 5px;">[email protected]</p>
      </div>

      <button onclick="/logout'">Logout</button>
    </div>
  </body>
</html>

弹性

#account_corner {
  display: flex;
  align-items: top;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Account corner</title>
  </head>
  <body>
    <div id="account_corner">
      <img style="height: 40px;" alt="account_photo" src="https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o=">

      <div>
        <span style="margin: 0 5px;">Example</span>
        <p style="margin: 0 5px;">[email protected]</p>
      </div>

      <button onclick="/logout'">Logout</button>
    </div>
  </body>
</html>

网格

网格布局是一个有点高级的布局系统，但非常强大。您可以创建一个虚拟网格并将项目放入其中。在此示例中，我使用 

grid-template-columns: 50px 180px 60px;
来定义布局，但它可以是您喜欢的任何内容。每个条目将成为一列

#account_corner {
  display: grid;
  grid-template-columns: 50px 180px 60px;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Account corner</title>
  </head>
  <body>
    <div id="account_corner">
      <img style="height: 40px;" alt="account_photo" src="https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o=">

      <div>
        <span style="margin: 0 5px;">Example</span>
        <p style="margin: 0 5px;">[email protected]</p>
      </div>

      <button onclick="/logout'">Logout</button>
    </div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.