将图像添加到引导选择？

我有一个7x7px的图像，我想为我的页面的每个选择选项旁边添加。我是否需要在CSS中添加图像，或者可以将它添加到HTML中？我也想把图片放在文字的左边。我试图添加一个图像，但只是弄乱了风格。感谢您的帮助！将图像添加到引导选择？

<ul class="dropdown-menu"> 
     <li> 
      <a href="#">Red</a> 
     </li> 
     <li> 
      <a href="#">Green</a> 
     </li> 
    </ul>

来源

2016-05-13 RainMan

这可能是你想要的东西：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Image Droprdown 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="http://www.thisisanfield.com/images/flat_web_icon_set/color/Facebook.png" width="17px" />Facebook</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="http://www.atmospherehotelsandresorts.com/images/icon-twitter.png" width="17px" />Twitter</a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <img src="https://cdn1.iconfinder.com/data/icons/thincons/100/menu-128.png" width="17px" />List Image</a> 
 
    </li> 
 
    </ul> 
 
</div>

备选：

var shownnn = "yes"; 
 
var dropd = document.getElementById("image-dropdown"); 
 

 
function showww() { 
 
    dropd.style.height = "auto"; 
 
    dropd.style.overflow = "y-scroll"; 
 
} 
 

 
function hideee() { 
 
    dropd.style.height = "30px"; 
 
    dropd.style.overflow = "hidden"; 
 
    } 
 
    //dropd.addEventListener('mouseover', showOrHide, false); 
 
    //dropd.addEventListener('click',showOrHide , false); 
 

 

 
function myfuunc(imgParent) { 
 
    hideee(); 
 
    var mainDIVV = document.getElementById("image-dropdown"); 
 
    imgParent.parentNode.removeChild(imgParent); 
 
    mainDIVV.insertBefore(imgParent, mainDIVV.childNodes[0]); 
 
}

#image-dropdown { 
 
    display: inline-block; 
 
    border: 1px solid; 
 
} 
 
#image-dropdown { 
 
    height: 30px; 
 
    overflow: hidden; 
 
} 
 
/*#image-dropdown:hover {} */ 
 

 
#image-dropdown .img_holder { 
 
    cursor: pointer; 
 
} 
 
#image-dropdown img.flagimgs { 
 
    height: 30px; 
 
} 
 
#image-dropdown span.iTEXT { 
 
    position: relative; 
 
    top: -8px; 
 
}

<!-- not tested in mobiles --> 
 

 
<div id="image-dropdown" onmouseleave="hideee();"> 
 
    <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();"> 
 
    <img class="flagimgs first" src="http://www.google.com/tv/images/socialyoutube.png" /> <span class="iTEXT">First</span> 
 
    </div> 
 
    <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();"> 
 
    <img class="flagimgs second" src="https://cdn1.iconfinder.com/data/icons/thincons/100/menu-128.png" /> <span class="iTEXT">Second</span> 
 
    </div> 
 
    <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();"> 
 
    <img class="flagimgs second" src="http://www.google.com/tv/images/lplay.png" /> <span class="iTEXT">Third</span> 
 
    </div> 
 
    <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();"> 
 
    <img class="flagimgs second" src="https://cdn1.iconfinder.com/data/icons/thincons/100/menu-128.png" /> <span class="iTEXT">Fourth</span> 
 
    </div> 
 
</div>

Source

来源

2016-05-13 03:26:36

将图像添加到引导选择？

回答

相关问题