主页 / 问题 / 907666
Accepted
Петровченко Иван
Asked:2020-11-17 15:59:24 +0800 CST2020-11-17 15:59:24 +0800 CST

Flexbox 和我的例子

  • 772

如何使徽标到位，以及右侧的帽子？

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Questrial', sans-serif;
}

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
}

.flex-container ul {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  font-size: 20px;
}

.list {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px 15px 0;
}
<header>
  <nav class="flex-container">
    <img class="logo" src="android.png">
    <ul>
      <li><a class="list" href="#">Home</a></li>
      <li><a class="list" href="#">Company</a></li>
      <li><a class="list" href="#">Services</a></li>
      <li><a class="list" href="#">Price</a></li>
      <li><a class="list" href="#">Projects</a></li>
      <li><a class="list" href="#">Order</a></li>
      <li><a class="list" href="#">Contacts</a></li>
    </ul>
  </nav>
</header>

它似乎已经表明它flex-container应该是什么row，从左到右它是row- 一个字符串（默认值）；

即，flex-container ul (flex-end)即右侧，内容应该是，但还是不行。

像现在： 在此处输入图像描述

如何： 在此处输入图像描述

html

2 个回答

  1. 有这样的属性 justify-content: space-between;

    .flex-container { display: flex; justify-content: space-between;}

    如果要将徽标固定在左侧，并将所有剩余空间用于菜单

    .flex-container { display: flex;}
.flex-container > ul {display: flex; flex:1; justify-content: flex-end;}
    • 2
  2. Best Answer

    可以是这样。设置容器

    justify-content: space-between;

    * {
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: 'Questrial', sans-serif;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  margin-right: 10px;
}

.flex-container ul {
  display: flex;
  list-style-type: none;
  font-size: 20px;
  margin-right: 50px;
}

.list {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px 15px 0;
}
    <header>
  <nav class="flex-container">
    <img class="logo" src="android.png">
    <ul>
      <li><a class="list" href="#">Home</a></li>
      <li><a class="list" href="#">Company</a></li>
      <li><a class="list" href="#">Services</a></li>
      <li><a class="list" href="#">Price</a></li>
      <li><a class="list" href="#">Projects</a></li>
      <li><a class="list" href="#">Order</a></li>
      <li><a class="list" href="#">Contacts</a></li>
    </ul>
  </nav>
</header>

    • 1

相关问题