我正在使用Dreamweaver编辑HTML5 CSS网站,但是子弹拒绝显示在列表中。我不知道问题是Safari还是网站的代码。
我尝试了许多建议,但未能找到解决方案。
<li id="page_donations">
<div class="contPad">
<div>
<h2>What we Do</h2>
<div class="scrollingDiv">
<ul class="list">
<li>
<div>
<h5>DESIGN</h5>
<p>Concept development, graphic design, web design, and logo design.</p>
</div>
</li>
<li>
<div>
<h5>MARKETING</h5>
<ul class="list">
<li>Identify, segment, or focus on your target market
<ul>
<li>Marketbridge can help you assess and narrow down your target market through a variety of traditional and non-traditional strategies including:
<ul>
<li>Market segmentation, database mining and development, leveraging market intelligence, conducting studies and consumer surveys among some of the strategies applied</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<div>
<h5>BRANDING</h5>
<p>Marketbridge's success will help drive our vision of cultivating a more cohesive professional and social network within businesses and communities which helps to fuel commerce and goodwill within our communities.</p>
</div>
</li>
<li>
<div>
<h5>PUBLIC RELATIONS</h5>
<p>Quality and integrity are supported by our strategies to help maximize the return on investment in the least amount of time. </p>
</div>
</li>
<li>
<div>
<h5>ADDITIONAL SERVICES</h5>
<p>Quality and integrity are supported by our strategies to help maximize the return on investment in the least amount of time. </p>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300);
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
/* Left & Right alignment */
.left {
float:left;
}
.right {
float:right;
}
.wrapper {
width:100%;
overflow:hidden;
position:relative;
}
.box {
overflow:hidden;
}
.clear {
clear:both;
width: 100%;
}
.last {
background:none !important;
border:none !important;
}
.pad_0 {
padding:0 !important;
}
/* Global properties ======================================================== */
body, html, .extra, #left_bg{
height:100%;
min-width:1220px;
min-height:550px;
}
body {
overflow:hidden;
border:0;
font:14px/20px Arial, sans-serif;
color:#FFF;
background:url(../images/27.jpg) 0 0 repeat;
}
#left_bg{
position:absolute;
width:81px;
background:url(../images/27_left.jpg) 0 0 repeat-y;
z-index:-1;
}
/* Global Structure ============================================================= */
.extra {
overflow:hidden;
margin-bottom:-80px;
}
.main {
position:relative;
}
.page_spinner {
position:fixed;
background: url(../images/main_spinner.gif) 50% 50% no-repeat #fff;
z-index:99;
width:100%;
height:100%;
top:0;
left:0
}
/* ============================= main layout ====================== */
a {
color:#909090;
text-decoration: none;
outline:none;
}
a:hover {
color:#757575
}
h1 {
position:absolute;
padding:0 0 0 0;
}
h2 {
font:35px/35px 'Open Sans Condensed', sans-serif;
color:#FFF;
font-weight:700;
padding-bottom:15px;
text-shadow: 1px 1px 6px #665d58;
}
h3{
font:18px/ 20px 'PT Sans Narrow', sans-serif;
color:#fff;
font-weight:700;
padding-bottom:7px;
text-shadow: 1px 1px 6px #665d58;
}
h4{
font:14px/20px Arial, sans-serif;
font-weight:normal;
text-shadow: 1px 1px 6px #665d58;
}
h5{
font:16px/16px 'Open Sans Condensed', sans-serif;
font-weight:600;
text-shadow: 1px 1px 6px #665d58;
}
h5 a{
font:16px/16px 'Open Sans Condensed', sans-serif;
color:#fff;
text-decoration: none;
outline:none;
font-weight:600;
text-shadow: 1px 1px 6px #665d58;
}
h5 a:hover{
font:16px/16px 'Open Sans Condensed', sans-serif;
color:#757575
font-weight:600;
text-shadow: 1px 1px 6px #665d58;
}
p{
padding-bottom:7px;
text-shadow: 1px 1px 6px #665d58;
}
.color1{
color:#74398e !important;
}
.color2{
color:#bd3274;
}
.color3{
color:#15b3f9;
}
V.color4{
color:#afbf44;
}
.color5{
color:#f8cc07;
}
.color6{
color:#ee8d1b;
}
.color7{
color:#e0191c;
}
.color8{
color:#000;
}
.color8 a {
color:#909090;
text-decoration: none;
outline:none;
}
color8 a:hover {
color:#757575
}
div.scrollingDiv
{
overflow-y:scroll;
height: 350px;
}
/* ============================= header ====================== */
header{
position:relative;
overflow:hidden;
width:1220px;
height:502px;
padding-top:145px;
}
#logo {
display:block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width:235px;
height:153px;
background:url(../images/logo.png) 0 0 no-repeat;
}
/* ============================= menu ====================== */
#leftLines{
float:left;
width:81px;
height:502px;
background:url(../images/left_menu_line.png) 0 0 no-repeat;
}
.menu {
float:left;
width:1139px;
height:502px;
}
#menu{
padding-top:121px;
}
#menu > li {
height:27px;
display:block;
margin-bottom:11px;
}
#menu > li > span{
display:inline-block;
width:50px;
height:27px;
}
#menu > li a {
position:relative;
top:-1px;
left:-3px;
font:34px/28px 'Impact', sans-serif;
text-transform:uppercase;
font-weight:normal;
}
#item1 > span{
background:url(../images/menu_line1.png) 0 0 repeat-x;
}
#item2 > span{
background:url(../images/menu_line2.png) 0 0 repeat-x;
}
#item3 > span{
background:url(../images/menu_line3.png) 0 0 repeat-x;
}
#item4 > span{
background:url(../images/menu_line4.png) 0 0 repeat-x;
}
#item5 > span{
background:url(../images/menu_line5.png) 0 0 repeat-x;
}
#item6 > span{
background:url(../images/menu_line6.png) 0 0 repeat-x;
}
#item7 > span{
background:url(../images/menu_line7.png) 0 0 repeat-x;
}
/* ============================= pages ====================== */
#page_home, #page_privacy, #page_more{
background:url(../images/page1_top_line.png) 0 0 repeat-x;
}
#page_mission{
background:url(../images/page2_top_line.png) 0 0 repeat-x;
}
#page_donations{
background:url(../images/page3_top_line.png) 0 0 repeat-x;
}
#page_news{
background:url(../images/page4_top_line.png) 0 0 repeat-x;
}
#page_reports{
background:url(../images/page5_top_line.png) 0 0 repeat-x;
}
#page_links{
background:url(../images/page6_top_line.png) 0 0 repeat-x;
}
#page_contacts{
background:url(../images/page7_top_line.png) 0 0 repeat-x;
}
/* ============================= content ====================== */
#content {
position:absolute;
top:160px;
padding:5px 0px 12px 0px;
width:711px;
height:453px;
background:url(../images/page_plane.png) 0 0 no-repeat;
z-index:5;
}
#content > ul {
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
#content > ul > li {
position:absolute;
width:100%;
height:584px;
padding-top:24px;
left: -26px;
top: -18px;
}
.contPad{
padding:0px 30px 0 40px;
}
.padBot1{
padding-bottom:40px;
}
.padBot2{
padding-bottom:25px;
}
.padTop1{
padding-top:20px;
}
.rBorder{
background:url(../images/content_step_line.png) right 0 repeat-y;
}
.more1, .more2{
position:relative;
margin-top:12px;
display:inline-block;
color:#fff;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
-webkit-transition:color 0.5s ease;
-moz-transition:color 0.5s ease;
-o-transition:color 0.5s ease;
transition:color 0.5s ease;
padding:7px 14px 10px;
font:18px/ 18px 'PT Sans Narrow', sans-serif;
font-weight:700;
text-shadow: 1px 1px 0px #665d58;
border-top:1px solid #646464;
border-right:1px solid #646464;
background:url(../images/more_1.png) 0 0 repeat-x;
}
.more1:hover{
color:#febe3b;
}
.more2{
margin-top:0px;
padding:5px 14px 8px;
font:22px/ 22px 'PT Sans Narrow', sans-serif;
font-weight:300;
letter-spacing:1px;
text-shadow: 1px 1px 0px #14b1f6;
border-top:1px solid #14b1f6;
border-right:1px solid #14b1f6;
background:url(../images/more_2.png) 0 0 repeat-x;
}
.more2:hover{
color:#3b3019;
}
.imgBot{
padding-bottom:16px;
}
#table1{
margin-bottom:35px;
height:253px;
border-bottom:1px solid #a6a6a6;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#tableHeader{
background-color:#15b3fa;
}
#tableHeader, #table1 .col1{
font-size:14px;
color:#151515;
font-weight:bold;
text-transform:uppercase;
}
#table1 #tableHeader td{
height:41px;
}
#table1 .anotherColor{
background-color:#efeff0;
}
#table1 td{
height:30px;
}
#table1 tr{
vertical-align:middle;
}
#table1 .col1{
border-left:1px solid #e9e9e9;
border-right:1px solid #c9c9ca;
width:43px;
text-align:center;
}
#table1 .col2{
width:440px;
text-indent:20px;
}
#table1 .col3{
border-left:1px solid #c9c9ca;
border-right:1px solid #e9e9e9;
width:149px;
text-align:center;
}
#page1_top{
padding:25px 0px 0px 45px;
width:560px;
height:200px;
background:url(../images/page1_pic1.) 0 0 no-repeat;
}
#page1_top > div{
padding-bottom:13px;
font:34px/ 34px 'Open Sans Condensed', sans-serif;
color:#FFF;
font-weight:300;
text-shadow: 1px 1px 6px #665d58;
}
#page1_top > div > span{
display:block;
font:50px/ 50px 'Open Sans Condensed', sans-serif;
color:#FFF;
font-weight:700;
}
.google_map{
float:left;
width: 360px;
height: 180px;
background: #fff;
}
.address {
width:230px;
padding-left:20px;
float:left;
}
.address > span{
display:block;
width:160px;
font:18px/ 20px 'PT Sans Narrow', sans-serif;
color:#757575;
font-weight:700;
padding-bottom:7px;
}
.mailLink{
color:#e0191c;
text-decoration:none;
}
.mailLink:hover{
text-decoration:underline;
}
/* ============================= lists ====================== */
.list1 li{
overflow:hidden;
width:270px;
padding-bottom:20px;
}
.list1 li > img{
float:left;
padding-right:10px;
}
.list1 li > ul{
overflow:hidden;
padding-top:7px;
width:178px;
}
.list2 li{
overflow:hidden;
padding-bottom:8px;
}
.list2 li > img{
float:left;
padding-right:18px;
}
.list2 li > div{
float:left;
overflow:hidden;
width:224px;
}
.list2 li > div a:hover{
text-decoration:underline;
}
.list3 li{
padding-bottom:17px;
}
.list3 li > img{
padding-bottom:16px;
}
.list3 li a{
font:18px/ 20px 'PT Sans Narrow', sans-serif;
color:#757575;
font-weight:700;
padding-bottom:7px;
}
.list3 li a:hover{
text-decoration:underline;
}
.list4{
margin-bottom:-10px;
}
.list4 li{
overflow:hidden;
padding-bottom:10px;
}
.list4 li > img{
float:left;
padding-right:20px;
}
.list4 li > div{
float:left;
overflow:hidden;
width:354px;
}
.list5 li{
padding-bottom:11px;
}
.list5 p{
line-height:18px;
padding-bottom:8px;
}
.list5 a{
font-size:13px;
font-weight:bold;
color:#ff6400;
}
.list5 a:hover{
text-decoration:underline;
}
.listWithMarker1 li, .listWithMarker2 li {
display:block;
padding-bottom:4px;
}
.listWithMarker1 li a, .listWithMarker2 li a {
display:inline-block;
padding:0 5px 0 17px;
text-decoration:underline;
}
.listWithMarker1 li a, .listWithMarker2 li a {
-webkit-transition:color 0.3s ease;
-moz-transition:color 0.3s ease;
-o-transition:color 0.3s ease;
transition:color 0.3s ease;
}
.listWithMarker1 li a {
color:#ff2a29;
background:url(../images/list_marker_1.png) 0 5px no-repeat;
}
.listWithMarker2 li a {
color:#feb829;
background:url(../images/list_marker_2.png) 0 5px no-repeat;
}
.listWithMarker1 li a:hover, .listWithMarker2 li a:hover {
color:#757575;
}
/* ============================= footer ====================== */
footer{
position:relative;
width:1100px;
font:15px/ 15px 'Open Sans Condensed', sans-serif;
color:#757575;
font-weight:700;
text-align:center;
text-transform:uppercase;
}
footer a{
text-decoration:none;
color:#c2c2c2;
}
footer ul{
padding-top:9px;
}
footer ul li{
display:inline-block;
padding-right:1px;
}
#icon1, #icon2{
display:block;
width:31px;
height:31px;
}
#icon1{
background:url(../images/icon1.png) 0 0 no-repeat;
}
#icon2{
background:url(../images/icon2.png) 0 0 no-repeat;
}
/* ============================= forms ============================= */
#form1 input {
margin:0;
border:1px solid #adadad;
background-color:#fff;
padding:15px 0 15px 17px;
width:252px;
box-shadow:none;
}
#form1 textarea {
resize: none;
margin:0;
border:1px solid #adadad;
background-color:#fff;
padding:14px 0 5px 17px;
width:330px;
height:92px;
overflow:auto;
line-height:18px;
}
#form1 label {
position:relative;
display:inline-block;
min-height:60px;
}
#form1 .error, #form1 .empty {
position:relative;
top: -3px;
display:none;
font-size:10px;
color:#414040;
text-transform:none;
}
.btns{
float:right;
}
.btns a{
margin:18px 0 0 13px;
}
/* Form defaults */
input, select, textarea {
font:14px/20px Arial, sans-serif;
color:#909090;
}
.blacktext {
color: #000;
}
.fb {
vertical-align: middle;
padding:40px 40 40px 40px;
}
a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt,
em, embed,
fieldset, figcaption, figure, font, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd,
keygen,
label, legend, li,
meter,
nav,
object, ol, output,
p, pre, progress,
q,
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul,
var {
background: transparent;
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top; }
ol, ul {
list-style-position:inside;
list-style: circle;
}
blockquote, q {
quotes: none;
}
table, table td {
padding:0;
border:none;
border-collapse:collapse;
}
img {
vertical-align:top;
}
embed {
vertical-align:top;
}
* { border:none}
input, textarea{ outline:none !important}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure,
footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{
display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23,
.grid_24 {
float: left;
}
.rightIndent{
padding-right:10px;
}
.rightIndent1{
padding-right:40px;
}
.rightIndent2{
padding-right:50px;
}
.leftIndent1{
padding-left:40px;
}
.leftIndent2{
padding-left:40px;
}
.height1{
}
.grid_1 {
width:30px;
}
.grid_2 {
width:70px;
}
.grid_3 {
width:110px;
}
.grid_4 {
width:150px;
}
.grid_5 {
width:190px;
}
.grid_6 {
width:230px;
}
.grid_7 {
width:270px;
}
.grid_8 {
width:310px;
}
.grid_9 {
width:350px;
}
.grid_10 {
width:390px;
}
.grid_11 {
width:430px;
}
.grid_12 {
width:470px;
}
.grid_13 {
width:510px;
}
.grid_14 {
width:550px;
}
.grid_15 {
width:590px;
}
.grid_16 {
width:630px;
}
.grid_17 {
width:670px;
}
.grid_18 {
width:710px;
}
.grid_19 {
width:750px;
}
.grid_20 {
width:790px;
}
.grid_21 {
width:830px;
}
.grid_22 {
width:870px;
}
.grid_23 {
width:910px;
}
.grid_24 {
width:950px;
}
答案 0 :(得分:5)
将你的代码片段用苏格兰威士忌标记在一起,我看到你的子弹消失的两个原因:首先,确保列表左边有足够的边距来实际显示子弹(20px应该足够了),如果小虫子仍在隐藏(例如你的例子中的情况,白色背景上的白色文字?),请给列表一些颜色。像这样:
ul.list{
margin-left: 20px;
color: deeppink;
}
你仍然要面对子弹没有文字阴影的问题,我不能给你一个快速而肮脏的答案。就个人而言,我会隐藏子弹,给我的列表项目一些填充,并在那里粘贴一个风格正确的背景图像。
答案 1 :(得分:2)
我知道这是一个老问题,但由于我遇到同样的问题并在看到这个问题后解决了,我想我会为别人回答这个问题。
如果您使用CSS3属性
display:block;
对于列表项,list-style / list-style-type属性将无效。见http://www.w3schools.com/tags/tag_li.asp
删除display:block;
或重置为display: list-item;