Question

我正在尝试在右上角显示ul菜单，但似乎没有任何作用，我也想更改ul之间的空格，但是当我添加填充时，只会弄乱我的嵌入式显示...我究竟做错了什么？

#menu {
    top:0;
    width:100%;
    height:12%;
    position:absolute;
    display: flex;
    align-items: center;
}

li {
    display:inline-block;
    position:relative;
}

#menu ul {
    float:right;    <!-- ????-->
    margin-right:5%; <!-- ????-->
}

h1 {
    margin-left:5%;
}

<div id="menu">
    <h1>My Headder</h1>
    <ul>
        <li><a href = "index.html">Hello</a></li>
        <li><a href = "index.html">home</a></li>
        <li><a href = "index.html">CONTACT</a></li>
    </ul>
</div>

Answer 1

reset set size 1,1 set multiplot # First set size 0.5,0.5 set origin 0,0 plot 'oliverBR.dat' using 1:2 w l lw 0.5 lt rgb 'black', 'svenBR.dat' using 1:2 w l lw 0.5 lt rgb 'blue', 'johannesBR.dat' using 1:2 w l lw 0.5 lt rgb 'green','sunjayBR.dat' using 1:2 w l lw 0.5 lt rgb 'yellow','mariamBR.dat' using 1:2 w l lw 0.5 lt rgb 'red','zhuangBR.dat' using 1:2 w l lw 0.5 lt rgb 'purple','zijuanBR.dat' using 1:2 w l lw 0.5 lt rgb 'orange' unset multiplot对float个孩子没有影响，您可以使用flex或margin。或align-self: end;父级上的justify-content:space-between

带有flex的示例...将一个灵活子级向右推。

margin-left:auto

#menu {
  top: 0;
  width: 100%;
  height: 12%;
  position: absolute;
  display: flex;
  align-items: center;
}

li {
  display: inline-block;
  position: relative;
}

#menu ul {
  margin-left: auto;
  margin-right: 5%;
}

h1 {
  margin-left: 5%;
}

资源或有用的提醒https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

只需添加辩解内容：之间的空格；像这样#menu：

#menu {
    ...
    justify-content: space-between;
}

并在li元素之间添加空格，只需添加填充即可：

#menu ul li {
    padding: 10px;
}

还要修复#menu ul的样式：

#menu ul {
    margin-right: 5%;
}

不需要浮点数：对；为ul

位置弹性儿童

2 个答案: