Html 作为要点的图像

所以，我只是在制作一个模拟网页（HTML和CSS），但是当我使用背景图像属性时，它会错位

下面是它的一个快照（在ul周围为div添加了绿色边框，#watchlisten）：

以下是我的HTML代码：

<div id="watchlisten">

            <h2>Watch/Listen</h2>

            <img class="boxesimg" src="images/boxes.png" alt="boxes" />

            <div class="break"></div>

            <img class="leftarrow" src="images/leftarrowbutton.png" alt="leftarrow" />

            <div class="wlblock">
              <img src="images/leftimage.png" />
              <p><a href="">Titanic letter could fetch £100,000</a></p>
            </div> <!-- watchlistenblock div -->

            <div class="wlblock">
              <img src="images/rightimage.png" />
              <p><a href="">Cameron defends "Muppet" remark</a></p>
            </div> <!-- watchlistenblock div -->

            <img class="rightarrow" src="images/rightarrowbutton.png" alt="rightarrow" />

            <ul>
              <li><a href="">Sentence 1</a></li>
              <li><a href="">Sentence 2</a></li>
              <li><a href="">Sentence 3</a></li>
            </ul>

         </div> <!-- watchlisten div -->

下面是我的JSFIDLE和HTML&CSS：

---

您需要在列表项中添加填充。您提供的CSS代码显示句子1、句子2等列表项不是目标。尝试添加以下代码：

#watchlisten ul li {
    padding-left: 25px;
}

或者，您可以通过以下方式尝试使用“列表样式图像”属性：

ul {
    list-style-image: url('my-image.png');
}

---

您需要向列表项添加填充。您提供的CSS代码显示句子1、句子2等列表项不是目标。尝试添加以下代码：

#watchlisten ul li {
    padding-left: 25px;
}

或者，您可以通过以下方式尝试使用“列表样式图像”属性：

ul {
    list-style-image: url('my-image.png');
}

---

有两件事会引起您的问题：

列表项上没有为背景图像创建空间的填充。给他们一些左边的填充物，并移除

ul上的填充物

左箭头有

float:left

，这将带来无序列表。用

#watchlistendiv ul{Clear:left；}

HTML/CSS/Demo

正文{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
#顶栏{
背景色：#7A0000；
宽度：100%；
高度：45px；
颜色：#FFFFFF；
}
.固定宽度{
宽度：1050px；
保证金：0自动；
/*背景颜色：绿色*/
}
/*英国广播公司标志*/
#logodiv{
填充顶部：8px；
浮动：左；
右边框：1px实心#990000；
右侧填充：15px；
}
/*登录文本*/
#signindiv{
字体大小：粗体；
字号：0.9em；
浮动：左；
填充：5px 50px 8px 8px；
右边框：1px实心#990000；
}
/*登录图像*/
#符号img{
位置：相对位置；
浮动：左；
利润率：6px 0 0 2px；
}
#signindiv p{
浮动：左；
利润率：10px04px；
}
#托普梅努迪夫{
浮动：左；
}
#托普梅努迪夫{
浮动：左；
保证金：0；
填充：0；
}
#托普梅努迪夫李{
列表样式类型：无；
字体大小：粗体；
字号：0.9em；
右边框：1px实心#990000；
身高：100%；
填充：15px 20px 10px 20px；
文本对齐：居中；
浮动：左；
}
#搜索div{
浮动：左；
填充：7px 0 0 8px；
}
#searchdiv输入{
高度：25px；
边界：无；
字号：0.9em；
左侧填充：5px；
右边填充：22px；
背景图像：url（'images/放大镜.png'）；
背景重复：无重复；
背景位置：右中；
}
/*清除所有浮点属性*/
.休息{
明确：两者皆有；
}
#新闻栏{
背景色：#990000；
宽度：100%；
高度：100px；
颜色：#FFFFFF；
}
#新闻栏{
利润率：10px0；
填充：0；
填充顶部：10px；
浮动：左；
}
#新闻标题{
字号：3em；
}
#英国{
字体大小：0.7em；
左侧填充：20px；
}
#rss{
浮动：对；
边缘顶部：38px；
}
#rss-img{
高度：13px；
右边填充：16px；
}
/*主题菜单：家庭、世界、英国、英格兰、北爱尔兰等*/
#主题菜单{
右边填充：16px；
}
#主题菜单{
背景色：#3E0C0D；
填充：5px0.5px；
保证金：0；
高度：20px；
}
#主题菜单李{
列表样式类型：无；
字号：0.8em；
右边框：1px实心#990000；
填充：0 6px 0 6px；
浮动：左；
文本对齐：居中；
背景色：无；
}
/*英国标签：灰色*/
.选定{
背景色：#EDEDED；
颜色：#666666；
高度：20px；
位置：相对位置；
顶部：-4px；
填充顶部：4px！重要；
}
/*内容部*/
#内容{
宽度：100%；
颜色：#535353；
字体大小：0.75em；
}
/*2014年4月2日最后更新15:23*/
#内容p{
右边距：16px；
}
/*2014年4月2日*/
.日期{
字体大小：粗体；
}
/*标题：污染将在英格兰蔓延*/
h1{
颜色：#1F4F82；
字号：2.5em；
}
/*标题图像*/
.头条新闻{
高度：220px；
浮动：左；
}
/*带段落和4个链接的Content div*/
.新闻项目{
位置：相对位置；
左：10px；
顶部：-15px；
宽度：280px；
浮动：左；
字体大小：1.1米；
}
/*链接颜色不带下划线*/
.新闻项目a{
颜色：#1F4F82；
}
/*所有锚链接都没有下划线*/
a{
文字装饰：无；
}
/*链接在悬停时有下划线*/
a:悬停{
文字装饰：下划线；
}
/*链接旁边的播放按钮*/
.视频{
背景图片：url（“images/playbutton.png”）；
背景重复：无重复；
背景位置：左中；
左侧填充：20px；
}
/*4个链接的线高度*/
.链接高度{
线高：1.6em；
}
/*声像*/
.声音{
背景图片：url（“images/soundbutton.png”）；
背景重复：无重复；
背景位置：左中；
左侧填充：20px；
}
/*观看/聆听部*/
#观察听{
背景色：#EEEEEE；
浮动：对；
宽度：367px；
位置：相对位置；
顶部：-80px；
右：17px；
}
/*看/听H2*/
氢{
颜色：#505050；
位置：相对位置；
保证金：0；
填充顶部：10px；
左侧填充：10px；
字号：1.8em；
}
/*4盒（一个橙色）图像*/
博克塞姆先生{
浮动：对；
位置：相对位置；
顶部：-14px；
右：10px；
}
/*左箭头图像（观察/查看）*/
.左箭头{
浮动：左；
右边框：1px纯白；
高度：134px；
}
/*橙色的Div，里面有单词*/
.wlblock{
浮动：左；
背景色：#D1700E；
宽度：157px；
右边框：1px纯白；
}
/*wlblock类中的标记，使其可单击*/
.WLA座{
颜色：白色；
}
/*wlblock类中的P标记*/
.WLP块{
利润率：9px 10px 6.5px 10px；
}
/*右箭头图像（观看/观看）*/
.右箭头{
浮动：左；
高度：134px；
}
#观察者{
边框：2倍纯绿；
位置：相对位置；
清除：左；
填充：0；
}
#李守信{
列表样式类型：无；
背景图像：url（“http://www.placehold.it/50");
背景重复：无重复；
左侧填充：50px；
字号：1.4em；
}

看/听