Question

我有一个带有子弹点的无序列表。我使用其中两个列表，首先是右对齐图像的左侧，然后是左对齐图像的右侧（没有列表右对齐）。第一个列表显示正常，但第二个列表的文本显示在图像的右侧，但子弹点不显示。

有没有办法可以将列表对齐到图像右侧？

以下是该页面的屏幕截图： 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>gettinggreener@isp.com</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>

Answer 1

我发现了如何操作：将overflow: hidden;添加到ul CSS，如下所示：

ul.nobullet {
    list-style-type: none;
    padding: 0;
    margin-left: 2em;
    overflow: hidden;
}

Mali303对此有一个很好的解释：
https://stackoverflow.com/a/13037482/4530832

如何在左对齐图片的右侧创建左对齐无序列表？

1 个答案: