what is this bullet point <li> not showing up with circles?

Question

I'm trying to show some bullet point list circles on my webpage, but it doesn't seem to show, and I tried using firebug but I can't find what's wrong, I went through my whole css file, and I don't see where the problem is, i want the list to be vertical with circles!

Please can you help me, here is the code :

 /* Browser resets. */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 1em; font-family: inherit; vertical-align: baseline; line-height: 1.5em; } #fancy_ajax .note{ cursor:default; } /* Three styles for the notes: */ .yellow{ background-color:#FDFB8C; border:1px solid #DEDC65; } .blue{ background-color:#A6E3FC; border:1px solid #75C5E7; } .green{ background-color:#A5F88B; border:1px solid #98E775; } /* Each note has a data span, which holds its ID */ span.data{ display:none; } /* Green button class: */ a.green-button,a.green-button:visited{ color:black; display:block; font-size:10px; font-weight:bold; height:15px; padding:6px 5px 4px; text-align:center; width:60px; text-shadow:1px 1px 1px #DDDDDD; background:url(../img/button_green.png) no-repeat left top; } a.green-button:hover{ text-decoration:none; background-position:left bottom; } .author{ /* The author name on the note: */ bottom:10px; color:#666666; font-family:Arial,Verdana,sans-serif; font-size:12px; position:absolute; right:10px; } #main{ /* Contains all the notes and limits their movement: */ margin:0 auto; position:relative; width:980px; height:500px; z-index:10; background:url(img/add_a_note_help.gif) no-repeat left top; } h3.popupTitle{ border-bottom:1px solid #DDDDDD; color:#666666; font-size:24px; font-weight:normal; padding:0 0 5px; } #noteData{ /* The input form in the pop-up: */ height:200px; margin:0px 0 0 0px; width:350px; } .note-form label{ display:block; font-size:10px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; padding-bottom:3px; } .note-form textarea, .note-form input[type=text]{ background-color:#FCFCFC; border:1px solid #AAAAAA; font-family:Arial,Verdana,sans-serif; font-size:19px; font-weight: bold; height:60px; padding:5px; width:300px; margin-bottom:0px; } .note-form input[type=text]{ height:auto; } .color{ /* The color swatches in the form: */ cursor:pointer; float:left; height:10px; margin:0 5px 0 0; width:10px; } #note-submit{ margin:20px auto; } body { height:100%; background-color: white; font-size: 14px; color: #333333; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; } /* custom selection colors */ ::-moz-selection { color: #fff; color: rgba(255,255,255,.85); background: #ea4c88; } ::selection { color: #fff; color: rgba(255,255,255,.85); background: #ea4c88; } /* Links */ a { text-decoration: none; color: #19558D; font-size: inherit; } a:hover { text-decoration: underline; } a:visited { text-decoration: none; background-color: inherit; color: #336699; } a img { border: none; } /* Input fields + label */ input, textarea { border: 1px solid #999999; padding: 5px; } label { float: left; margin-right: 10px; margin-top: 10px; margin-bottom: 0pxpx; width: 120px; font-size: 22px; color: inherit; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; } #error { font-size: 14px; } /* Lists */ li { font-size: 14px; margin-left: 10px; list-style-type: circle; display:inline; } li a { margin-left: inherit; } #like_text { float: left; color: #0099CC; cursor: pointer; font-size: inherit; } .like_list_element { width: 681px; float: left; padding-top: 15px; margin-left: 0px; height: 35px; border-bottom: 1px solid #999999; } .like_list_element:hover { width: 681px; float: left; padding-top: 15px; margin-left: 0px; height: 35px; border-bottom: 1px solid #999999; background-color: #EDEDED; } .micro_avatar { float: left; width: 30px; height: 30px; margin-right: 15px; margin-top: -7px; padding: 2px; background-color: #ffffff; -moz-box-shadow: 2px 2px 4px #D1D1D1; -webkit-box-shadow: 2px 2px 4px #D1D1D1; box-shadow: 2px 2px 4px #D1D1D1; -moz-border-radius: 2px; border-radius: 2px; } /* "Super" headline */ h1 { font-weight: bold; font-style: italic; font-size: 38px; color: #666666; font-family: Georgia, "Times new roman", serif; } /* "Medium (bold)" headline */ h2 { font-size: 20px; font-weight: bolder; color: inherit; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; } /* Normal headline (used on profile page) */ .normal_headline { font-size: 22px; float: left; font-weight: bold; color: inherit; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; } /* "Standard" headline */ h3 { font-size: 15px; color: inherit; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; } /* page structure */ /* Container - main content goes here */ #container { min-height: 100%; height:100%; width: 897px; margin-bottom: 30px; margin: 0 auto; } /* Left (main) content */ #left_content { float: left; width: 485px; font-size: 1em; padding-left: -15px; } ul.statuses{ margin:10px 0; } ul.statuses li { position:relative; padding:15px 15px 15px 10px; list-style:none; font-size:12px; } div.tweetTxt{ float:left; width:400px; overflow:hidden; } ul.statuses a img.avatar{ float:left; margin-right:10px; border:1px solid #446600; } div.date{ line-height:18px; font-size:10px; color:#999999; } .question_link{ float:left; font-weight: bold; margin-left:40px; color:blue; } #answerText { float:left; width:480px; margin-left:40px; margin-bottom: 5px; } #answerText ul{ margin-left:40px; } #answerText li { list-style-type: circle; font-size:30px; } .answerActions { float:left; margin-left:40px; font-size:9px; } .thanks{ font-weight:bold; } .content{ float:left; } /* Used for seperating content eg. Timeline && photos */ .left_content_seperator { width: 485px; float: left; border-bottom: 1px solid #999999; margin-top: 15px; margin-bottom: 30px; height: auto; } /* Used in eg. postphoto.php */ .big_content_seperator { width: 897px; float: left; border-bottom: 1px solid #999999; margin-bottom: 30px; } /* Right side content */ .right_content { float: right; width: 200px; font-size: 14px; margin-right:80px; } /* Used for seperating content eg. Timeline && photos */ .right_content_seperator { width: 200px; float: right; margin-top: 33px; margin-bottom: 15px; } .right_content_seperator_home { width: 200px; float: right; margin-top: 25px; margin-bottom: 15px; } /* For footer + header (outside the main container) */ .small_container { margin: 0 auto; width: 900px; } /* The bar on the top of the page */ .top_bar { width: 100%; height: 50px; margin-bottom: 30px; background:none repeat scroll 0 0 black; } #search { width: 502px; padding: 10px; height:20px; margin: 10px 0px 0px -30px; background-color:#505759; float:left } .question_box{ background: none repeat scroll 0 0 #FFFFFF; border-color: #CCCCCC #999999 #999999 #CCCCCC; border-style: solid; border-width: 1px; color: #000000; font: 16px arial,sans-serif; margin: -5px 0px 0px -5px; padding: 5px 8px 0px 6px; width:380px; height:25px } input.blur { color: #999; } #search a { color: #E5E5E5; text-decoration: none; font-weight: bold; } #search a:hover { text-decoration: underline; } /* Logotype container */ .logotype { background-color:#671E1E; font-size: 20px; float: left; color:white; padding:10px; margin: 10px 30px 0px 0px; } /* The menu on the top of the page */ .top_menu { float: right; text-align: right; background-color: inherit; color: #ffffff; margin: 15px 0px 0px 0px; } .top_menu a { color: #E5E5E5; text-decoration: none; } .top_menu a:hover { text-decoration: underline; color: inherit; } /* Main content + form container on the front page */ .text_box { margin: 0 auto; margin-top: 70px; text-align: center; width: 590px; } /* Box for the iPhone image on the front page */ .iphone_promo { margin: 0 auto; margin-top: 70px; margin-bottom: 30px; text-align: center; width: 590px; } /* Red arrow next to the iPhone picture */ .arrow { margin: 0 auto; margin-left: 210px; margin-bottom: -145px; } /* Typography */ .small_copy { font-size: 12px; } #menu_list ul{ } #menu_list li{ } .not_selected { -moz-border-radius: 5px 5px 5px 5px; background-image: url("http://d1vgw4v7ja2ido.cloudfront.net/-9dfe92083011731d.gif"); background-position: left center; background-repeat: no-repeat; clear: both; display: block; font-weight: bold; padding: 3px 5px 3px 10px; color: #444444; cursor: default; } .not_selected:hover{ background-color:lightblue; } .selected{ -moz-border-radius: 5px 5px 5px 5px; background-image: url("http://d1vgw4v7ja2ido.cloudfront.net/-9dfe92083011731d.gif"); background-position: left center; background-repeat: no-repeat; clear: both; display: block; font-weight: bold; padding: 3px 5px 3px 10px; background-color: #E0E0E0; color: #444444; cursor: default; } #menu_list li{ margin-left: inherit; } .right_seperator { width: 200px; float: left; border-bottom: 1px dotted #999999; margin-top: 15px; margin-bottom: 10px; height: auto; } .light_gray_serif { font-family: Georgia, "Times new roman", serif; font-size: inherit; color: #999999; font-size: 14px; } /* Forms */ #email_form { width: 285px; height: 40px; font-size: 22px; margin-right: -1px; outline: none; font-weight: bold; color: #999999; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; float: left; } #submit_button { width: 295px; height: 52px; font-size: 22px; font-weight: bold; margin-left: -1px; cursor: pointer; color: inherit; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; border: 1px solid #F9AA33; float: right; } #username_form { width: 448px; height: 40px; font-size: 22px; margin-bottom: 15px; outline: none; font-weight: bold; color: inherit; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; float: right; } #password_form { width: 448px; height: 40px; font-size: 22px; margin-bottom: 15px; outline: none; font-weight: bold; color: inherit; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; float: right; } .standard_big_form { width: 448px; height: 40px; font-size: 22px; margin-bottom: 15px; outline: none; font-weight: bold; color: inherit; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; float: right; } /* Big login button */ #login_button { width: auto; padding-left: 20px; padding-right: 20px; height: 52px; font-size: 22px; font-weight: bold; margin-left: -1px; cursor: pointer; color: inherit; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; border: 1px solid #F9AA33; float: right; } #login_button:active { position: relative; top: 1px; } /* Standard buttons */ .big_button { width: auto; padding-left: 20px; padding-right: 20px; height: 52px; font-size: 22px; font-weight: bold; cursor: pointer; color: #333333; font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; border: 1px solid #F9AA33; float: right; } .big_button:active { position: relative; top: 1px; } .profile_name_container { width: auto; } .follow_container { float: left; width: auto; margin-top: 7px; margin-left: 15px; } .follow_button { margin-left: 0px; text-align: justify; color: #0099CC; padding-left: 20px; padding-right: 4px; padding-top: 4px; padding-bottom: 4px; -moz-border-radius: 5px; border-radius: 5px; font-size: 14px; background: url(../images/follow-icon.png) no-repeat 4px 6px; } .follow_button:hover { cursor: pointer; margin-left: -1px; margin-right: -1px; background-color: #EDEDED; border: 1px solid #999999; background-image: url(../images/follow-icon.png) no-repeat 4px 6px; } .unfollow_button { margin-left: 0px; text-align: justify; color: #0099CC; padding-left: 20px; padding-right: 4px; padding-top: 4px; padding-bottom: 4px; -moz-border-radius: 5px; border-radius: 5px; font-size: 14px; background: url(../images/unfollow-icon.png) no-repeat 4px 6px; } .unfollow_button:hover { cursor: pointer; margin-left: -1px; margin-right: -1px; background-color: #EDEDED; border: 1px solid #999999; background-image: url(../images/unfollow-icon.png) no-repeat 4px 6px; } .push_footer { margin-bottom: 200px; } /* Footer (container) of the page */ .footer { float: left; margin-top: 30px; padding-bottom: 15px; width: 897px; height: 49px; border-top: 1px solid #999999; } /* "Photoblogging through events." text. */ .footer_info { font-size: 14px; float: left; margin-top: 15px; } /* The link to 'Support & Feature requests' */ .footer_link { font-size: 14px; float: right; margin-top: 15px; } /*** Colors ***/ /* Blue gradient (css gradients, #336699 is used for IE and older browsers) */ .blue_gradient { background: #336699; background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#336699)); background: -moz-linear-gradient(top, #0099CC, #336699); } /* Yellow gradient (for button) #FBAA33 = orange */ .yellow_gradient { background: #FBAA33; background: -webkit-gradient(linear, left top, left bottom, from(#FBF16E), to(#FBAA33)); background: -moz-linear-gradient(top, #FBF16E, #FBAA33); } .yellow_gradient:hover { background: #F6D05A; } /* Image design */ .photo { float: left; min-width: 200px; min-height: 200px; padding: 5px; margin-right: 15px; margin-bottom: 15px; background-color: #ffffff; border: 1px solid #EAEAEA; -moz-box-shadow: 4px 4px 10px #D1D1D1; -webkit-box-shadow: 4px 4px 10px #D1D1D1; box-shadow: 4px 4px 10px #D1D1D1; } .photo_thumbnail:hover { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; } .big_photo_container { text-align: center; width: 666px; margin-bottom: 15px; } .event_name { height: 20px; margin-right: 5px; width: 169px; float: left; } .trash_can { height: 17px; width: 14px; -moz-border-radius: 5px; border-radius: 5px; padding-top: 3px; padding-left: 2px; float: right; } .trash_can:hover { cursor: pointer; margin: -1px; background-color: #EDEDED; border: 1px solid #999999; } /* Image design */ .big_photo { margin-top: 15px; max-width: 656px; padding: 5px; background-color: #ffffff; border: 1px solid #EAEAEA; -moz-box-shadow: 4px 4px 10px #D1D1D1; -webkit-box-shadow: 4px 4px 10px #D1D1D1; box-shadow: 4px 4px 10px #D1D1D1; } .profile_photo { float: left; width: 50px; height: 50px; margin-right: 15px; margin-bottom: 15px; padding: 5px; background-color: #ffffff; -moz-box-shadow: 4px 4px 10px #D1D1D1; -webkit-box-shadow: 4px 4px 10px #D1D1D1; box-shadow: 4px 4px 10px #D1D1D1; -moz-border-radius: 5px; border-radius: 5px; } .profile { padding-top: 15px; } /* Heart sign */ .fav { margin-left: 0px; color: #0099CC; padding-left: 20px; padding-right: 4px; padding-bottom: 4px; -moz-border-radius: 5px; border-radius: 5px; background: url(../images/heart-icons.png) no-repeat 4px 4px; } .fav:hover { cursor: pointer; margin-left: -1px; margin-right: -1px; background-color: #EDEDED; border: 1px solid #999999; background: url(../images/heart-icons.png) no-repeat 4px -13px #EDEDED; } .highlight { margin-left: 0px; color: #0099CC; cursor: pointer; padding-left: 20px; padding-right: 4px; padding-bottom: 4px; -moz-border-radius: 5px; border-radius: 5px; background: url(../images/heart-icons.png) no-repeat 4px -13px; } .highlight:hover { cursor: pointer; margin-left: -1px; margin-right: -1px; background-color: #EDEDED; border: 1px solid #999999; background: url(../images/heart-icons.png) no-repeat 4px 4px #EDEDED; } /* Heart sign */ .likes { font-size: inherit; } /* Views */ .views { padding-left: 20px; float: right; } /* Costum */ /* Removes underlines for eg. buttons */ .no_underline:hover { text-decoration: none; } /* Margins */ .small_margin_top { margin-top: 15px; } .negative_margin_top { margin-top: -4px; } .custom_margin_top { margin-top: 48px; } .no_margin_left { margin-left: 0px; } .no_margin_top { margin-top: 0px; } /* Paddings */ .no_padding_top { padding-top: 0px; } .normal_font_weight { font-weight: normal; } .photo_label { margin-right: auto; padding-left: 6px; text-align: left; } /* button basics */ a.minibutton { display:inline-block; height:23px; padding:0 0 0 3px; font-size:11px; font-weight:bold; color:#333; text-shadow:1px 1px 0 #fff; background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 0 0 no-repeat; white-space:nowrap; margin-right:4px; border:none; overflow:visible; cursor:pointer; text-decoration:none; } a.minibutton>span { display:block; height:23px; padding:0 10px 0 8px; line-height:23px; background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 100% 0 no-repeat; } a.minibutton:hover, a.minibutton:focus { color:#fff; text-decoration:none; text-shadow:-1px -1px 0 rgba(0,0,0,0.3); background-position:0 -30px; } a.minibutton:hover>span, a.minibutton:focus>span {background-position:100% -30px;} a.minibutton.mousedown{background-position:0 -60px; } a.minibutton.mousedown>span{background-position:100% -60px; } /* answer button */ a.answer { display:inline-block; height:23px; padding:0 0 0 3px; font-size:18px; font-weight:bold; color:#333; text-shadow:1px 1px 0 #fff; background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 0 0 no-repeat; white-space:nowrap; margin-right:4px; border:none; overflow:visible; cursor:pointer; text-decoration:none; } a.answer>span { display:block; height:23px; padding:0 10px 0 8px; line-height:23px; background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 100% 0 no-repeat; } a.answer:hover, a.answer:focus { color:#fff; text-decoration:none; text-shadow:-1px -1px 0 rgba(0,0,0,0.3); background-position:0 -30px; } a.answer:hover>span, a.answer:focus>span {background-position:100% -30px;} a.answer.mousedown{background-position:0 -60px; } a.answer.mousedown>span{background-position:100% -60px; } /* with icon */ a.btn-download .icon { float:left; margin-left:-4px; width:18px; height:22px; background:url(http://github.com/images/modules/buttons/minibutton_icons.png?v20100306) 0 0 no-repeat; } a.btn-download .icon {background-position:-20px 0;} a.btn-download:hover .icon, a.btn-download:focus .icon {background-position:-20px -25px;} #profile_pic{ padding:5px; border:1px #AAAAAA solid; float:left; } ul.stats{ width:auto; float:left; display:inline; margin: 20px 0px 0px 0px; } ul.stats li{ display:inline-block; text-align:left; } .stats_number{ font-weight:bold; font-size:10px; } .stats_text{ font-size:9px; color:#505759; } ul.followingBar{ width:auto; float:left; margin: 0px 0px 0px 0px; } .watchingTopics{ float:left } ul.followingBar li{ display:block; margin: 10px 0 0 0 ; border-bottom:1px #999999 solid; } .topicFollow{ padding-bottom:10px; font-weight:bold; float:left; } .related_questions{ padding-bottom:10px; font-weight:bold; } .panel { margin-left:50px; margin-right:50px; margin-bottom:5px; background-color:#D3E7F5; padding:6px; width:400px; display:none; float:left; } .load_comment { margin-left:50px; margin-right:50px; margin-bottom:5px; background-color:#D3E7F5; height:auto; padding:6px; width:400px; font-size:12px; float:left; } .flash_load { margin-left:50px; margin-right:50px; margin-bottom:5px;height:20px; padding:6px; width:400px; display:none; } .loadplace{ margin-top:70px; }

 <ul class="statuses"> <li> <div id="answerText"> <ul> <li>google</li> <li>yahoo</li> <li>quora</li> </ul> </div> </li> </ul>

Answer 1

li具有display: list-item则li仅应用其与list-style相关的样式

Answer 2

Your style for <li> is wrong:

li {
    font-size: 14px;
    margin-left: 10px;
    list-style-type: circle;
    display: inline;
 }

should be

li {
    font-size: 14px;
    margin-left: 10px;
    list-style-type: circle;
 }

Answer 3

Try ensuring there are no:

list-style-type: none;

in your css file.

Answer 4

You attributed display:inline; to the LI tag, which explains why they're showing up horizontally instead of vertical. Get rid of that attribute.

Answer 5

list not display bullet points

list-style-type:none; Hey , you may have a problem in selector for example we have this code for list

some text

soke text

so our css code become like this

#ls{ list-style-type: circle;} select with id value if you have multiple list .

Answer 6

I found that having overflow-x: hidden; (which I had applied to * ) was hiding my bullets.

Answer 7

My issue was caused by:

::marker { 
    content: none;
}

I was able to resolve by updating the CSS for my element to include:

li::marker {
    content: initial;
}