Question

我如何将图片放在中间的超链接上，我想在超链接上方的图片之间放置两个文本，但是我尝试了，但它总是在橙色栏顶部我怎么做这个代码所以它走到橙色吧前面？感谢。

＆＃13;

   
        
        #nav {
        width: 110%;
            height: 150px;
          float: left;
        padding: 0px;
        list-style: none;
        background-color: darkorange;
         }
        #nav li {
        float: left; }
           
        #nav li a {
        display: block;
        padding: 55px 55px;
        text-decoration: none; 
        font-weight: bold;
        color: #069;
            margin-right: 284px;
           padding-top: 105px;
            font-size: 25px
         }
        #nav li a: {
        color: blue;
        background-color: darkorange; }

＆＃13;

    <html>
    <head>
    <title> Malta Youth Group</title>
        </head>

    
    <div>
       <img id = "Logo"src="campfire1.png" alt="campfire logo" height="42" width="42">
        <div>   
            <ul id="nav">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Lastest activties</a></li>
                <li><a href="#">How to join</a></li>
                <li><a href="#">Contact us</a></li>
               
            </ul>
        </div>
    </div>

＆＃13;

Answer 1

我不确定这是你想要做的，但让我们试试这个：

   #nav {
    width: 110%;
        height: 150px;
      float: left;
    padding: 0px;
    list-style: none;
    background-color: darkorange;
     }
    #nav li {
    float: left; }

    #nav li a {
    display: block;
    padding: 55px 55px;
    text-decoration: none; 
    font-weight: bold;
    color: #069;
        margin-right: 284px;
       padding-top: 105px;
        font-size: 25px
     }
    #nav li a: {
    color: blue;
    background-color: darkorange; 
    }
    img {
      position: absolute;
      top: 75px;
      }
    }

<div>
   <img id ="logo" src="http://via.placeholder.com/150x150" alt="campfire logo" height="42" width="42">
    <div>   
        <ul id="nav">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Lastest activties</a></li>
            <li><a href="#">How to join</a></li>
            <li><a href="#">Contact us</a></li>

        </ul>
    </div>
</div>

如何在上面的文字上添加图片

1 个答案: