Question

我试图制作一个标题菜单，其中一些菜单位于左侧，其中一些菜单位于右侧。

这里是标题的html：

<li class="nav6">
    <a href="#img"><img src="example.com/img.png"></a>
</li>
<div class="options">
    <li class="nav5">
        <a href="1">1</a>
    </li>
    <li class="nav5">
        <a href="2" target="_blank">2</a>
    </li>
    <li class="nav5">
        <a href="3">3</a>
    </li>
</div>

这就是css：

.nav6 {
   position:absolute;
   left:95%;
}
.nav6 a {
    text-decoration: none;
    color:black;
}
.nav5 a:hover {
    background-color: #111;
    border-radius: 15px;
}
.nav5 {
    float:right;
}
.nav5 a {
    display: block;
    color: #282828;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

}

.options {
    float: left;
    display: inline-block;;
}
li{
    list-style-type: none;
}

所以问题是我要么在手机上，要么只是让窗口变小， .nav6 中的部分图像部分出现或者，因为在我的网站上我添加了一个自动滚动条，它会自动显示一个滚动条。

我想要的是图像在右侧， .options 将在左侧，但是，图像将以各种方式完全看到。

我已尝试添加 .nav6 样式：

float:right;

但问题是，我已经在 .nav6 中获得了一个下拉菜单，并且它没有以该样式打开。

Answer 1

如果您想要image方right，则必须在.nav6之前添加选项并使用div进行warp并设置display:flex

见小提琴：https://jsfiddle.net/om7am3x5/

.warp{
  display:flex;
}
.nav6 {

}
.nav6 a {
    text-decoration: none;
    color:black;
}
.nav5 a:hover {
    background-color: #111;
    border-radius: 15px;
}
.nav5 {
    float:right;
}
.nav5 a {
    display: block;
    color: #282828;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

}

.options {
    float: left;
    display: inline-block;;
}
li{
    list-style-type: none;
}

<div class=warp>
<div class="options">
    <li class="nav5">
        <a href="1">1</a>
    </li>
    <li class="nav5">
        <a href="2" target="_blank">2</a>
    </li>
    <li class="nav5">
        <a href="3">3</a>
    </li>
</div>
<li class="nav6">
    <a href="#img"><img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/></a>
</li>

</div>

文字不在窗口

1 个答案: