在html菜單中插入圖片

Question

我有一個這樣的菜單，我想插入它，但社交網絡按鈕是在所有的權利，我怎麼能？

我想補充一點，是圖像社交網絡按鈕，但我不能插入他們，因爲一個div認爲這是一個

<div class="botonera"><ul class="menu"> 
    <li><a href="/index.php">INICIO</a></li> 
    <li><a href="1.php">CARICATURAS</a></li> 
    <li><a href="2.php">DINOSAURIOS</a></li> 
    <li><a href="index.php">TEMARIO</a></li> 
    <li><a href="3.php">PREGUNTAS</a></li> 
    <li><a href="4.php">ACERCA DE</a></li> 
    <li><a href="5.php">CONTACTAR</a></li> 
    </ul> 
    </div> 

CSS中的不當

#botonera { 
     width: 900px; 
     height: 21px; 
     background-color: #000; 
    } 
    .texto-botones { 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 16px; 
     font-style: normal; 
     line-height: 10px; 
     color: #FFF; 
     padding-top: 10px; 
     padding-bottom: 0px; 
     margin-left: 10px; 
    } 

    .menu, 
    .menu ul, 
    .menu li, 
    .menu a { 
     margin: 0; 
     padding: 0; 
     border: none; 
     outline: none; 
    } 

    .menu { 
     height: 21px; 
     width: 900px; 

    } 

    .menu li { 
     position: relative; 
     list-style: none; 
     float: left; 
     display: block; 
     height: 21px; 
    } 

    .menu li a { 
     display: block; 
     padding: 0 12px; 
     margin: 0px 0; 
     line-height: 22px; 
     text-decoration: none; 



     font-family: Helvetica, Arial, sans-serif; 
     font-weight: bold; 
     font-size: 12px; 

     color: #ffffff; 

     -webkit-transition: color .2s ease-in-out; 
     -moz-transition: color .2s ease-in-out; 
     -o-transition: color .2s ease-in-out; 
     -ms-transition: color .2s ease-in-out; 
     transition: color .2s ease-in-out; 
     text-align: right; 
     text-align: right; 
     text-align: right; 
     text-align: right; 
    } 

    .menu li:first-child a { border-left: none; } 
    .menu li:last-child a{ border-right: none; } 

    .menu li:hover > a { 
     color: #FF6C6C; 
    } 

    .menu ul { 
     position: absolute; 
     top: -109px; 
     left: 0; 

     opacity: 0; 
     background: #1f2024; 

     -webkit-border-radius: 0 0 5px 5px; 
     -moz-border-radius: 0 0 5px 5px; 
     border-radius: 0 0 5px 5px; 

     -webkit-transition: opacity .10s ease .1s; 
     -moz-transition: opacity .10s ease .1s; 
     -o-transition: opacity .10s ease .1s; 
     -ms-transition: opacity .10s ease .1s; 
     transition: opacity .10s ease .1s; 
    } 

    .menu li:hover > ul { opacity: 1; } 

    .menu ul li { 
     height: 0; 
     overflow: hidden; 
     padding: 0; 


    } 

    .menu li:hover > ul li { 
     height: 36px; 
     overflow: visible; 
     padding: 0; 
    } 

    .menu ul li a { 
     width: 36px; 
     padding: 10px 0 1px 10px; 
     margin: 0; 

     border: none; 
     border-bottom: 0px solid #353539; 
    } 

    .menu ul li:last-child a { border: none; } 

    .menu a.documents { background: url(../img/docs.png) no-repeat 6px center; } 
    .menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; } 
    .menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; } 

Answer 1

後，您可以插入一個div <ul>將<ul>作爲float:left;和新按鈕float:right;。確保兩個div都在同一個容器中。