列表中一条直线上的图标和文本

Question

Hi guys so basically I am trying to putt some social media logo and next to it i want to write the account detailes or any kind of text next to the icon i am strugling with that because i want to have some movement when someone put the mouse on the icon and here everything screw up so if someone know how to make the text and the icon next to each other at the same time both of them get the same effect when someone putt the mouse on the icon or the text大家好，所以基本上我想放一些社交媒体徽标，在它旁边我想写帐户详细信息或图标旁边的任何类型的文本，我正在为此苦苦挣扎，因为我想在有人放置鼠标时进行一些移动在图标上，这里的一切都搞砸了，所以如果有人知道如何使文本和图标同时彼此相邻，那么当有人将鼠标放在图标或文本上时，它们都会得到相同的效果

https://jsfiddle.net/asda12321/9mj5q8k4/1/ https://jsfiddle.net/asda12321/9mj5q8k4/1/

`<div id="bottom">
    <div id="socia-midea-logo">
        <ul>
            <li><a href="index.html.html" ><img id="socia-midea-logo" src="../content/ico/facebook.png" alt="insta img"></a></li>
            <h1>Facebook</h1>
            <li><a href="index.html.html"><img id="socia-midea-logo" src="../content/ico/whatsapp.png" alt="insta img"></a></li>
            <h1>Whatsapp</h1>
            <li><a href="index.html.html"><img id="socia-midea-logo" src="../content/ico/instagram.png" alt="insta img"></a></li>
            <h1>Instgram</h1>
            <li><a href="index.html.html"><img id="socia-midea-logo" src="../content/ico/world-wide-web.png" alt="insta img"></a></li>
            <h1>Email</h1>
        </ul>
    </div>
</div>`

Css Css

#bottom{
    padding-bottom: 100px;
    background-color: turquoise;
}

#socia-midea-logo {
    width: 1em;
    position: relative;
    top: 0.5em;
    left: 1.5em;
    margin: 5em 0em 0em 0em; 
    width: 4em;
}

#socia-midea-logo ul{
    list-style: none;
}



#socia-midea-logo li a:hover{
    position:relative;
    background-color: rgb(255, 255, 255);
    padding: 3.7em 2.7em 1.5em 0em;
    align-items: center;
    border-radius: 50em;
    transition: 0.2s;
}

Always the text goes below the icon only文本始终仅位于图标下方

Answer 1

You have a lot of bugs in Yopurs code. Yopurs 代码中有很多错误。

You can't mix H1 and LI elements您不能混合H1和LI元素
You cant use one id id="socia-midea-logo" in more than one element.您不能在多个元素中使用一个 id id="socia-midea-logo" 。
You should not use H1 without text section.你不应该使用没有文本部分的 H1。 This is not forbidden but it is still small document structure bug.这不是禁止的，但它仍然是一个小文档结构错误。

I suggest do it like this: https://jsfiddle.net/6jt94pab/我建议这样做： https://jsfiddle.net/6jt94pab/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style>
      .social-media ul{
        list-style: none;
        width:100%;
        box-sizing:border-box;
      }

      .social-media li{
        display:block;
        width:100%;
        margin:5px;
        box-sizing:border-box;
      }

      .social-media li a{
        display:block;
        height:40px;
        line-height:40px;
        padding-left:60px;
        position:relative;
        color:#555555;
        box-sizing:border-box;
      }

      .social-media li img{    
        position:absolute;
        left:10px;
        top:2px;
        width:38px;
        height:38px;
        transition:all 300ms ease;
      }

      .social-media li a:hover{
        color:#0055AA;
        background:#f0f0f0;
        border-radius:5px;
      }

      .social-media li a:hover>img{
        transform:rotate(360deg);
      }

    </style>
  </head>
  <body>

    <div class="social-media">
      <ul>
        <li><a href=""><img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Facebook">Facebook</a></li>
        <li><a href=""><img src="https://cdn-icons-png.flaticon.com/512/174/174879.png" alt="Facebook">WhatsApp</a></li>
        <li><a href=""><img src="https://cdn-icons-png.flaticon.com/512/4812/4812397.png" alt="Facebook">Email</a></li>
      </ul>
    </div>

  </body>
</html>

列表中一条直线上的图标和文本

问题描述

1 个解决方案

解决方案1
0 2023-01-17 20:15:23

列表中一条直线上的图标和文本

问题描述

1 个解决方案

解决方案1 0 2023-01-17 20:15:23

解决方案1
0 2023-01-17 20:15:23