css 图标只是不想移动到右边或与我的ul下面的冲突

e5nqia27  于 2023-03-25  发布在  其他
关注(0)|答案(5)|浏览(121)

I Assume the empty space is a div element, in which there is space to the right在屏幕上看到，我只需要酒吧图标移动到右侧的div，在右上角，并有下面的ul.但我已经调整了至少一个小时，现在似乎找不到解决方案.谢谢回复！
超文本：

<div><i class="fa-solid fa-bars fa-3x">
                <div class="container-navmenu">
                    <ul>
                        <li><a href="https://www.playrealm.de/home">Home</a></li>
                        <li><a href="https://www.playrealm.de/wiki">Wiki</a></li>
                        <li><a href="https://www.playrealm.de/shop">Shop</a></li>
                        <li><a href="https://www.playrealm.de/team">Team</a></li>
                        <li><a href="https://www.playrealm.de/news">News</a></li>
                        <li><a href="https://www.playrealm.de/contact">Contact us</a></li>
                    </ul>
                </div>
                </i>
                </div>

样式表：

.fa-bars{
    color: white;
    float: right;
}
.fa-bars:hover{
    color: rgba(161,51,255,1.00);
}
.fa-bars:hover ul{
    display: block;
}
.container-navmenu{
    margin-right: 200px;
    margin-top: 50px;
    float:right;
    text-align: right;
}
.container-navmenu ul{
    display: block;
    position: absolute;
    background-color: #262F3D;
    border-radius: 20px;
    float: right;
}
.container-navmenu ul li{
    list-style: none;
    position: relative;
}
.container-navmenu ul li a{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: all 0.3s ease 0s;
}
.container-navmenu ul li a:hover{
    color: rgba(161,51,255,1.00)
}

我试着调整margin和Padding，但是Icon是连接到List的，因此它不会改变两者的相对位置。我还试着在图标后面结束</i>，不包括List，但是结果是，我没有找到在Hover上显示List的方法，因为.fa-bars:hover.container-navmanu ul{display:block}什么都没有做。

css

5条答案

按热度按时间
zengzsys

zengzsys1#

要将条形图图标移动到div的右上角，可以尝试将以下CSS属性添加到.fa-bars类：

.fa-bars {
  color: white;
  position: absolute;
  top: 0;
  right: 0;
}

这将使图标位于div的右上角。
要在悬停时显示列表，可以用途：

.fa-bars:hover {
  color: rgba(161, 51, 255, 1.00);
}

.navmenu-container:hover .container-navmenu ul {
  display: block;
}

这将显示ul元素时，酒吧图标悬停。
下面是更新后的代码：
一个二个一个一个
希望这能有所帮助！

赞(0）分享  回复(0）举报  2023-03-25
rbpvctlc

rbpvctlc2#

我找到了一个解决方案：
关闭图标后面的</i>标记，
将CSS选择器.fa-bars:hover ul更改为.fa-bars:hover + div ul
(see也将.container-navmenu ul更改为display: none）
祝你好运！

.fa-bars{
    color: black;
    float: right;
}
.fa-bars:hover{
    color: rgba(161,51,255,1.00);
}
.fa-bars:hover + div ul{
    display: block;
}
.container-navmenu{
    margin-right: 200px;
    margin-top: 50px;
    float:right;
    text-align: right;
}
.container-navmenu ul{
    display: none;
    position: absolute;
    background-color: #262F3D;
    border-radius: 20px;
    float: right;
}
.container-navmenu ul li{
    list-style: none;
    position: relative;
}
.container-navmenu ul li a{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: all 0.3s ease 0s;
}
.container-navmenu ul li a:hover{
    color: rgba(161,51,255,1.00)
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div>
  <i class="fa-solid fa-bars fa-3x"></i>
  <div class="container-navmenu">
    <ul>
      <li><a href="https://www.playrealm.de/home">Home</a></li>
      <li><a href="https://www.playrealm.de/wiki">Wiki</a></li>
      <li><a href="https://www.playrealm.de/shop">Shop</a></li>
      <li><a href="https://www.playrealm.de/team">Team</a></li>
      <li><a href="https://www.playrealm.de/news">News</a></li>
      <li><a href="https://www.playrealm.de/contact">Contact us</a></li>
    </ul>
  </div>
</div>
赞(0）分享  回复(0）举报  2023-03-25
zsbz8rwp

zsbz8rwp3#

关闭图标后面的</i>标签，并在我的fa-bars样式中使用position: absolute; top: 30px; right: 20px;而不是使用float: right;来移动图标，我已经将图标重新定位到右上角，并将列表重新定位到下面。为了进一步扩展解决方案，您应该在标签中使用一个新的类，将图标和列表放在一起，你现在可以从他那里调用一个[new class]:hover .container-navmenu ul来保持列表打开，而你在图标上和列表上。如果你不这样做，列表将消失，只要你离开图标。巨大的感谢大家给了我这个解决方案！

赞(0）分享  回复(0）举报  2023-03-25
kknvjkwl

kknvjkwl4#

尝试在.fa-bars：：之前添加position：absolute和right：0，如下所示：

.fa-bars::before {
    position: absolute;
    right: 0;
}
.fa-bars{
    color: black;
    float: right;
}
.fa-bars:hover{
    color: rgba(161,51,255,1.00);
}
.fa-bars:hover ul{
    display: block;
}
.container-navmenu{
    margin-right: 200px;
    margin-top: 50px;
    float:right;
    text-align: right;
}
.container-navmenu ul{
    display: block;
    position: absolute;
    background-color: #262F3D;
    border-radius: 20px;
    float: right;
}
.container-navmenu ul li{
    list-style: none;
    position: relative;
}
.container-navmenu ul li a{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: all 0.3s ease 0s;
}
.container-navmenu ul li a:hover{
    color: rgba(161,51,255,1.00)
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <div>
     <i class="fa-solid fa-bars fa-3x">
     <div class="container-navmenu">
       <ul>
         <li><a href="https://www.playrealm.de/home">Home</a></li>
         <li><a href="https://www.playrealm.de/wiki">Wiki</a></li>
         <li><a href="https://www.playrealm.de/shop">Shop</a></li>
         <li><a href="https://www.playrealm.de/team">Team</a></li>
         <li><a href="https://www.playrealm.de/news">News</a></li>
         <li><a href="https://www.playrealm.de/contact">Contact us</a></li>
       </ul>
     </div>
    </i>
   </div>
赞(0）分享  回复(0）举报  2023-03-25
ippsafx7

ippsafx75#

CSS不是问题所在;<i>标签可能只有语法内容作为子标签，否则将导致意外行为。

.fa-bars {
  float: right;
}

.fa-bars:hover {
  color: rgba(161, 51, 255, 1.00);
}

.fa-bars:hover ul {
  display: block;
}

.container-navmenu {
  margin-right: 200px;
  margin-top: 50px;
  float: right;
  text-align: right;
}

.container-navmenu ul {
  display: block;
  position: absolute;
  background-color: #262F3D;
  border-radius: 20px;
  float: right;
}

.container-navmenu ul li {
  list-style: none;
  position: relative;
}

.container-navmenu ul li a {
  font-family: "forma-djr-display", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: white;
  text-decoration: none;
  padding: 10px;
  display: block;
  transition: all 0.3s ease 0s;
}

.container-navmenu ul li a:hover {
  color: rgba(161, 51, 255, 1.00)
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />

<div>
  <i class="fa-solid fa-bars fa-3x"></i>
  <div class="container-navmenu">
    <ul>
      <li><a href="https://www.playrealm.de/home">Home</a></li>
      <li><a href="https://www.playrealm.de/wiki">Wiki</a></li>
      <li><a href="https://www.playrealm.de/shop">Shop</a></li>
      <li><a href="https://www.playrealm.de/team">Team</a></li>
      <li><a href="https://www.playrealm.de/news">News</a></li>
      <li><a href="https://www.playrealm.de/contact">Contact us</a></li>
    </ul>
  </div>
</div>
赞(0）分享  回复(0）举报  2023-03-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com