html - 文字在窗外

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

如果您想要右侧中的图像，您必须将选项放在.nav6之前并用 div 扭曲所有并设置 display:flex

参见 fiddle :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>