html - 图片作为要点

Question

所以，我只是制作一个模拟网页(HTML 和 CSS)，但是当我使用 background-image 属性时，它会错位。

这是它的外观快照(在 div 的 ul 周围添加了绿色边框，#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 -->

这是我的 CSS:

body {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
}

#topbar  {
   background-color:#7A0000;
   width: 100%;
   height: 45px;
   color: #FFFFFF;
}

.fixedwidth  {
   width: 1050px;
   margin: 0 auto;
   /* background-color: green; */
}

/* BBC Logo */
#logodiv  {
  padding-top: 8px;
  float: left;
  border-right: 1px solid #990000;
  padding-right: 15px;
}

/* Sign In Text */
#signindiv  {
  font-weight: bold;
  font-size: 0.9em;
  float: left;
  padding: 5px 50px 8px 8px;
  border-right: 1px solid #990000;
}

/* Sign In Image */
#signindiv img  {
  position: relative;
  float: left;
  margin: 6px 0 0 2px;
}

#signindiv p {
  float: left;
  margin: 10px 0 0 4px;
}

#topmenudiv  {
  float: left;
}

#topmenudiv ul  {
  float: left;
  margin: 0;
  padding: 0;
}

#topmenudiv li  {
  list-style-type: none;
  font-weight: bold;
  font-size: 0.9em;
  border-right: 1px solid #990000;
  height: 100%;
  padding: 15px 20px 10px 20px;
  text-align: center;
  float: left;
}

#searchdiv  {
  float: left;
  padding: 7px 0 0 8px;
}

#searchdiv input  {
  height: 25px;
  border: none;
  font-size: 0.9em;
  padding-left: 5px;
  padding-right: 22px;
  background-image:url('images/magnifyglass.png');
  background-repeat: no-repeat;
  background-position: right center;
}

/* Clears all float attributes */
.break  {
  clear: both;
}

#newsbar  {
   background-color:#990000;
   width: 100%;
   height: 100px;
   color: #FFFFFF;
}

#newsbar p  {
  margin: 10px 0 0 0;
  padding: 0;
  padding-top: 10px;
  float: left;
}

#newsheader  {
  font-size: 3em;
}

#uk  {
  font-size: 0.7em;
  padding-left: 20px;
}

#rss  {
  float: right;
  margin-top: 38px;
}

#rss img  {
  height: 13px;
  padding-right: 16px;
}

/* Topics Menu: Home, World, UK, England, N. Ireland, etc. */
#topicmenu  {
  padding-right: 16px;
}

#topicmenu ul  {
  background-color: #3E0C0D;
  padding: 5px 0 0 5px;
  margin: 0;
  height: 20px;
}

#topicmenu li  {
  list-style-type: none;
  font-size: 0.8em;
  border-right: 1px solid #990000;
  padding: 0 6px 0 6px;
  float: left;
  text-align: center;
  background-color: none;
}

/* UK Tab: Grey; */
.selected  {
  background-color: #EDEDED;
  color: #666666;
  height: 20px;
  position: relative;
  top: -4px;
  padding-top: 4px !important;
}

/* Content DIV */
#content  {
   width: 100%;
   color: #535353;
   font-size: 0.75em;
}

/* 2 April 2014 Last updated 15:23 */
#content p  {
  margin-right: 16px;
}

/* 2 April 2014 */
.date  {
  font-weight: bold;
}

/* Headline: Pollution to spread across England */
h1  {
  color: #1F4F82;
  font-size: 2.5em;
}

/* Headline Image */
.headlineimg  {
  height: 220px;
  float: left;
}

/* Content div with paragraph and 4 links */
.newsitem  {
  position: relative;
  left: 10px;
  top: -15px;
  width: 280px;
  float: left;
  font-size: 1.1em;
}

/* Link with color and no underline */
.newsitem a  {
  color: #1F4F82;
}

/* All anchor links have no underline */
a {
  text-decoration: none;
}

/* Links have underline when hovered */
a:hover  {
  text-decoration: underline;
}

/* Play button next to Links */
.video  {
  background-image:url("images/playbutton.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 20px;
}

/* line heights for 4 links */
.linkheight  {
  line-height: 1.6em;
}

/* sound image */
.sound  {
  background-image:url("images/soundbutton.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 20px;
}

/* Watch/Listen DIV */
#watchlisten  {
  background-color: #EEEEEE;
  float: right;
  width: 367px;
  position: relative;
  top: -80px;
  right: 17px;
}

/* Watch/Listen H2 */
h2  {
  color:#505050;
  position: relative;
  margin: 0;
  padding-top: 10px;
  padding-left: 10px;
  font-size: 1.8em;
}

/* 4 boxes (one orange) image */
.boxesimg  {
  float: right;
  position: relative;
  top: -14px;
  right: 10px;
}

/* left arrow image (WATCH/LOOK) */
.leftarrow  {
  float: left;
  border-right: 1px solid white;
  height: 134px;
}

/* Orange Div with words in them */
.wlblock  {
  float: left;
  background-color: #D1700E;
  width: 157px;
  border-right: 1px solid white;
}

/* a tag in class wlblock, made to be clickable */
.wlblock  a {
  color: white;
}

/*P tag in class wlblock */
.wlblock p  {
  margin: 9px 10px 6.5px 10px;
}

/* right arrow image (WATCH/LOOK) */
.rightarrow  {
  float: left;
  height: 134px;
}

#watchlisten ul  {
  border: 2px solid green;
  position: relative;
}

#watchlisten li  {
  list-style-type: none;
  background-image:url("images/liveimg.png");
  background-repeat: no-repeat;
  font-size: 1.4em;
  border-bottom: ;
}

这是我的带有 HTML 和 CSS 的 JSFiddle:

http://jsfiddle.net/bbx4xdad/

Answer 1

您需要向列表项添加填充。您提供的 CSS 代码显示句子 1、句子 2 等列表项未被定位。尝试添加此代码:

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

或者，您可以尝试以这种方式使用“list-style-image”属性:

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