-3
我有一個包含項目符號的無序列表。我使用這些列表中的兩個,首先是右對齊圖像的左側,然後是左對齊圖像的右側(沒有列表右對齊)。第一個列表顯示正常,但第二個列表中的文本顯示在圖像的右側,但是項目符號不顯示。如何在左對齊圖片的右側製作左對齊無序列表?
有沒有一種方法可以將列表與圖像的右側對齊?
這裏是頁面的截圖: http://i.stack.imgur.com/qXz8n.png
這裏是樣式表和HTML:
ul.nobullet {
list-style-type: none;
padding: 0;
margin-left: 2em;
}
li.globe {
background: url(images/earthbullet.jpg) no-repeat left top;
height: 20px;
padding-left: 25px;
padding-top: 4px;
margin-left: 3em;
}
p.bottom {
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Going Green </title>
<meta name="author" content="" />
<meta name="description" content="Home page for Green Home" />
<meta name="keywords" content="Assignment 1" />
<link rel="stylesheet" type="text/css" href="greenstyle.css">
</head>
<body>
<h1><font color="green">GREEN HOME ENVIRONMENT</font></h1>
<p>
Getting Greener conducted a green audit for a family of five that lives east of Seattle.<br>
Getting Greener found that the homeowner used more electricity than the average household.<br>
Any additional energy produced by the panels could be sold back to the public utility company.<br>
The homeowners also invested in an electric car that runs on the solar electric energy provided by the panels.<br>
</p>
<h3>This homeowner:</h3>
<p>
<img src="images/solar.jpg" alt="Home installation solar panels" align="right">
As you can see in the picture on the right, photovoltaic solar panels are installed on the
roof of the home. The panels face south to get the most sunshine possible throughout the day.
The green audit showed us how many panels the home needed, based on the family's average
electricity consumption. This family's consumption includes an energy-efficient furnace and air
conditioner, energy-efficient appliances, energy-efficient windows and doors, and
energy-efficient lightbulbs throughout the house. Additionally, the entire family is energy
aware and responsible.
<ul class="nobullet">
<li class="globe">Approximate annual savings is <b>$5,087</b></li>
<li class="globe">Installation can be completed within one week</li>
<li class="globe">Government and tax incentives are available</li>
<li class="globe">Public utility company hook-up quick and easy</li>
<li class="globe">Savings begin immediately</li>
</ul>
</p>
<div style="clear: both;"></div>
<p>
<img src="images/car.jpg" alt="An electric car" align = "left">
The homeowners also invested in an electric car to make their lives more green. The car
is plugged into an outlet in the garage, so the power needed to run the car comes completely
from the solar panels mentioned above. There are many energy efficient cars on the market
today. Some states have tax incentives for people who buy these cars. Review reports online
to see which car might best suit your needs.
<ul class="nobullet">
<li class="globe">Approximate annual savings is $6,087 over a gas-fueled vehicle</li>
<li class="globe">Car gets 244 miles per charge</li>
<li class="globe">Homeowner can travel to Seattle daily for weeks on one charge</li>
<li class="globe">Car is stylish</li>
<li class="globe">Savings begin immediately</li>
</ul>
</p>
<p class="bottom">
The pictures above show two things that you can do as a homeowner to make your home
more environmentally responsible. To have your own green audit, please call us at
<b>(999) 555-GREEN</b> or e-mail us at <b>[email protected]</b>. <br>
If you use e-mail, please include the following information: <br>
(1) your address and phone number, (2) the approximate energy usage of your household (if known), and (3) a few days and times that are
convenient
for for us to contact you. We will send an e-mail response back to you to let you know that
we did receive your request.
</p>
</body>
</html>
'font'是過時的,使用CSS來代替。 'p'元素不能包含'ul'元素,並且會被自動關閉。 – Oriol