如何添加图标以列出菜单的项目？ [英] How to add icons to list items for the menu?
问题描述
大家好！
我正在尝试为我的网站建立一个菜单，我在将列表项旁边的图标（菜单选项）放入时遇到问题没有它干扰其他列表项目..
HTML CODE
< ！DOCTYPE html PUBLIC >
< html xmlns = http：/ /www.w3.org/1999/xhtml\">
< head >
< link rel = stylesheet type = text / css href = < span class =code-keyword> stylesheet.css >
< title > 独立< / title >
< / head >
< body >
< div class = sectionone >
< ul class = horizontalmenu >
< li data-type = home > < a href = ＃ > 主页< / a > < / li >
< li < span class =code-attribute> data-type = hot > < a href = ＃ > 热< / a > < / li >
< li data-type = < span class =code-keyword>精选 > < a href = ＃ > 精选 < / a > < / li >
< ; li data-type = toprated > < span class =code-keyword>< a href = ＃ > 评分最高< / a > < / li > ;
< li data-type = 新增 > < a href = ＃ > 新增< / a > < / li >
< li data-type = submitindie > < a href = ＃ > 提交独立< / a > < / li >
< li data-type = 排名 > < a < span class =code-attribute> href = ＃ > 排名< / a > < / li >
< / ul >
< / div >
< div class = sectiontwo >
< center > ; < img < span class =code-attribute> class = logo src = http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/magic-marker-icons-arrows/114907-magic-marker-icon-arrows-triangle-solid-up.png width = 200 > < / center >
用户名：< 输入 class = textinput type = text name = url / >
密码：< 输入 class = textinput type = text name = url / >
< br / > < br / >
六种颜色是什么？
< br / >
< br / >
< 表格 > ;
< fieldset >
< 图例 > 谨慎选择< / legend >
< p > < label > < 输入 < span class =code-attribute> type = 广播 名称 = size > 红色< / label > < / p >
< p > < label > < input type = radio 名称 = size > Gold < /标签 > < / p >
< p > < label > < 输入 type = radio name = size > 无颜色< / label > < / p >
< / fieldset >
< < span class =code-leadattribute> button id = submitq type =' submit' > 登录
< / div >
< div class = sectionthree >
< / div >
< / body >
< / html >
CSS
< pre lang =CSS> body {
margin ： 0;
padding ： 0;
width ： 100％;
text-align ： center;
background-image ： url（http://www.macwallhd.com/wp-content/Wallpapers/20120625/Apple%20Mac%20Android%20Emulator% 20For％20Your％20Computer-2120152447.jpeg）;
color ： < span class = code-keyword>＃939393;
}
。 sectionone {
width ： auto;
height ： 30px;
border-style ： double;
border-top ： 0;
background-color ： black;
margin-bottom ： 10px ;
}
。 horizontalmenu {
list-style-type ： none;
margin ： 0;
padding ： 0;
}
。 horizontalmenu li a {
font-size ： 12px;
font-family ： Tahoma，Geneva，sans-serif;
font-weight ： 更轻;
颜色 ： white;
display ： inline;
float ： left;
margin ： 5px 5px 15px 9％;
}
li [data- type =home] {
list-style-image ： URL（数据：图像/ PNG; 的base64，iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAACnklEQVQ4EXVSW0hUYRCemXNW0kpQWKMEKyPKoCeVKOh + eUgQLHuQXkpKsXpQMFd98qXLakkJsWQU3aieylxKiKDt8pCW1UMsCpkZWK33LSTxnPNP8x88y2I1cM7MznzznX + <跨度类= 代码注释 > // <跨度类= 代码注释> 0P4T9S0Hki11Mxy5ShMI + vruZNPpv8FxfnNY8Gi7UwqwA5sQaBvbACDo7KJ6LX0W0K1XV3JOwmCpqYmGknraRX4PsXGKSL + LCA 8REZU2G + bjKCgQfheWumxyvbKXksTmR5bLLX7PDAVyJdqie02AFqiZ8zyIINhwQQT1iiGMt / PrCsyOqTnpF9VzUWbGakUEC46bN / 1lvXMCybIFKobsnBPKdpYFSwq1jOXAADrUPFZBnWBgOZ6AP6MpbBy2VqPw802awycRoKAbmDF5XyfGc + aAjYqAPm2hy7I2wple05AipkC9yPXINLbKfLI / 9GBWKGAW9GGHJMm / Nly9El5VrszKXYWlkDJtnIXq1 + lO45CRrofHkSuiiYM6PB6Yv7MPswl0 / ShEsk9tP7K4Pc + 72cij8d / uMu6IVeLbEpyRLnY9IJhApUpzJ8S6KQieLMaeqLPkjq65I9yjlXisQEjGok6hbvWbDIJhhwF + YiwiEQhy7ZgYDgKfUPvwbZnYWRyGCZ / jentOCgOI3BOqP7xJdcHcpAWh51bJlG1Dc6d8XiMHr64rsFuvOt / 5ZVALF4go5EZ63XTvbJQXfi5GK5DgaoCpIMKYDSxMVc4Sk3J0Q + L + vslvwkFwh16lHCif6awejTtbZuoe0YuokEU0xKtQxb / GRA1lGELvlEM1TM2nXpkjleg8 + J4cO9ucX8DgNog1 / PFJjG4ghWC / CDQ5lDgUWfyyl8E3rA8WLx4IatchxTaanawvf5p3Jsl5z9iERtr3B + 9XgAAAABJRU5ErkJggg ==）;
padding-left ： 30px;
}
。 sectiontwo {
border-style ： double;
font-size ： 12px;
font-family ： Tahoma，Geneva，sans-serif;
font-权重 ： 更轻;
填充 ： 25px 25px 25px 25px;
width ： 20％;
background-image ： url（http://deadpanpictures.ie/dpp/wp -content / uploads / 2014/09 / tumblr_static_texture-pattern-black-background-wallpaper1.jpg）
}
。 sectionthree {
border-style ： double;
font-size ： 12px;
< span class =code-attribute> font-family ： Tahoma，Geneva，sans-serif;
font-weight ： 打火机;
float ： left ;
padding ： 25px 25px 25px 1240px;
margin-top ： 10px;
}
。 logo {
border ： 1px纯白色;
border-radius ： 5px;
margin ： 3％ ;
padding ： 2 ％;
background-color ： white;
width ： 20px;
}
。 textinput {
伯德r-style ： double;
颜色 ： 灰色;
width ： 120px;
保证金 ： 10px;
}
。 textinput ：hover {
color ： ＃008000;
background ： #FFF;
填充 ： 0 5px 0 5px;
}
fieldset {
color ： white;
border-style ： 点缀;
}
＃ submitq {
border-style ： double;
< span class =code-attribute> color ： ＃F0F8FF;
margin ： 10px;
}
我很感谢大家的意见:)
更新 - 在第一个列表项中添加了1个图标。但是它没有对齐其他列表项。
你的css代码中的问题就是为什么它与其他列表无法对齐，只需在你的css中更改如下 - 而不仅仅是anchor css
。 horizontalmenu li a {
font-size ： 12px;
font-family ： Tahoma，Geneva，sans-serif;
font-weight ： 更轻;
颜色 ： white;
}
。 horizontalmenu li {
float ： left;
margin ： 5px 5px 10px 9％;
}
Hi everyone!
Im trying to build a menu for my website and I'm having a problem putting the icon next to the list item (menu option) without it interfering with other list items..
HTML CODE
<!DOCTYPE html PUBLIC>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title> Indie</title>
</head>
<body>
<div class="sectionone">
<ul class="horizontalmenu">
<li data-type="home"><a href="#">Home</a></li>
<li data-type="hot"><a href="#">Hot</a></li>
<li data-type="featured"><a href="#">Featured</a></li>
<li data-type="toprated"><a href="#">Top Rated</a></li>
<li data-type="newlyadded"><a href="#">Newly Added</a></li>
<li data-type="submitindie"><a href="#">Submit Indie</a></li>
<li data-type="rankings"><a href="#">Rankings</a></li>
</ul>
</div>
<div class="sectiontwo">
<center><img class="logo" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/magic-marker-icons-arrows/114907-magic-marker-icon-arrows-triangle-solid-up.png" width="200"></center>
Username: <input class="textinput" type="text" name="url"/>
Password: <input class="textinput" type="text" name="url"/>
<br/><br/>
What is the color of six?
<br/>
<br/>
<form>
<fieldset>
<legend> Choose Carefully </legend>
<p><label> <input type=radio name=size> Red </label></p>
<p><label> <input type=radio name=size> Gold </label></p>
<p><label> <input type=radio name=size> No Color </label></p>
</fieldset>
<button id="submitq" type='submit'> Login
</div>
<div class="sectionthree">
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
background-image: url(http://www.macwallhd.com/wp-content/Wallpapers/20120625/Apple%20Mac%20Android%20Emulator%20For%20Your%20Computer-2120152447.jpeg);
color: #939393;
}
.sectionone {
width: auto;
height: 30px;
border-style: double;
border-top: 0;
background-color: black;
margin-bottom: 10px;
}
.horizontalmenu {
list-style-type: none;
margin: 0;
padding: 0;
}
.horizontalmenu li a {
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: lighter;
color: white;
display: inline;
float:left;
margin: 5px 5px 15px 9%;
}
li[data-type="home"] {
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACnklEQVQ4EXVSW0hUYRCemXNW0kpQWKMEKyPKoCeVKOh+eUgQLHuQXkpKsXpQMFd98qXLakkJsWQU3aieylxKiKDt8pCW1UMsCpkZWK33LSTxnPNP8x88y2I1cM7MznzznX+//0P4T9S0Hki11Mxy5ShMI+vruZNPpv8FxfnNY8Gi7UwqwA5sQaBvbACDo7KJ6LX0W0K1XV3JOwmCpqYmGknraRX4PsXGKSL+LcA8REZU2G+bjKCgQfheWumxyvbKXksTmR5bLLX7PDAVyJdqie02AFqiZ8zyIINhwQQT1iiGMt/PrCsyOqTnpF9VzUWbGakUEC46bN/1lvXMCybIFKobsnBPKdpYFSwq1jOXAADrUPFZBnWBgOZ6AP6MpbBy2VqPw802awycRoKAbmDF5XyfGc+aAjYqAPm2hy7I2wple05AipkC9yPXINLbKfLI/9GBWKGAW9GGHJMm/Nly9El5VrszKXYWlkDJtnIXq1+lO45CRrofHkSuiiYM6PB6Yv7MPswl0/ShEsk9tP7K4Pc+72cij8d/uMu6IVeLbEpyRLnY9IJhApUpzJ8S6KQieLMaeqLPkjq65I9yjlXisQEjGok6hbvWbDIJhhwF+YiwiEQhy7ZgYDgKfUPvwbZnYWRyGCZ/jentOCgOI3BOqP7xJdcHcpAWh51bJlG1Dc6d8XiMHr64rsFuvOt/5ZVALF4go5EZ63XTvbJQXfi5GK5DgaoCpIMKYDSxMVc4Sk3J0Q+L+vslvwkFwh16lHCif6awejTtbZuoe0YuokEU0xKtQxb/GRA1lGELvlEM1TM2nXpkjleg8+J4cO9ucX8DgNog1/PFJjG4ghWC/CDQ5lDgUWfyyl8E3rA8WLx4IatchxTaanawvf5p3Jsl5z9iERtr3B+9XgAAAABJRU5ErkJggg==) ;
padding-left: 30px;
}
.sectiontwo {
border-style: double;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: lighter;
padding: 25px 25px 25px 25px;
width: 20%;
background-image: url("http://deadpanpictures.ie/dpp/wp-content/uploads/2014/09/tumblr_static_texture-pattern-black-background-wallpaper1.jpg")
}
.sectionthree {
border-style: double;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: lighter;
float: left;
padding: 25px 25px 25px 1240px;
margin-top: 10px;
}
.logo {
border: 1px solid white;
border-radius: 5px;
margin: 3%;
padding: 2%;
background-color: white;
width: 20px;
}
.textinput {
border-style: double;
color: grey;
width: 120px;
margin: 10px;
}
.textinput :hover {
color: #008000;
background: #FFF;
padding:0 5px 0 5px;
}
fieldset {
color: white;
border-style: dotted;
}
#submitq {
border-style: double;
color: #F0F8FF;
margin: 10px;
}
I appreciate the input from all of you :)
Updated - Added 1 icon to the first list item. But it unaligned the other list items.
Problem in your css code thats why it is unaligning the other list, just change as below in your css - instead of only anchor css
.horizontalmenu li a { font-size: 12px; font-family: Tahoma, Geneva, sans-serif; font-weight: lighter; color: white; } .horizontalmenu li { float: left; margin: 5px 5px 10px 9%; }
这篇关于如何添加图标以列出菜单的项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
