Question

我正在尝试创建一个未精确对齐的水平列表，如下所示：http://i.imgur.com/G8xWymZ.png（水平和分散）

这是我到目前为止所得到的：

HTML

import java.applet.Applet;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GraphicsConfiguration;
import java.awt.GraphicsEnvironment;
import java.awt.RenderingHints;
import java.awt.Transparency;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;

public class SierpinskiCarpet extends Applet
{
    private int d0 = 729; // 3^6
    private BufferedImage bufferedImage;
    private final GraphicsConfiguration gConfig = GraphicsEnvironment
        .getLocalGraphicsEnvironment().getDefaultScreenDevice()
        .getDefaultConfiguration();

    public void init()
    {
        resize(d0, d0);
    }

    public void paint(Graphics g)
    {
        drawSierpinskiCarpet(g, 0, 0, getWidth(), getHeight());
        storeImage();
    }

    public void storeImage()
    {
        BufferedImage image = create(d0, d0, true);
        Graphics2D g = image.createGraphics();
        g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
            RenderingHints.VALUE_ANTIALIAS_ON);
        drawSierpinskiCarpet(g, 0, 0, getWidth(), getHeight());
        g.dispose();
        try
        {
            ImageIO.write(image, "png", new File(
                "C:\\Users\\User\\Desktop\\sierpinskiImage.png"));
        }
        catch (IOException e)
        {
            e.printStackTrace();
        }
    }

    private void drawSierpinskiCarpet(Graphics g, int xOL, int yOL,
        int breedte, int hoogte)
    {
        if (breedte > 2 && hoogte > 2)
        {
            int b = breedte / 3;
            int h = hoogte / 3;
            g.fillRect(xOL + b, yOL + h, b, h);
            for (int k = 0; k < 9; k++)
                if (k != 4)
                {
                    int i = k / 3;
                    int j = k % 3;
                    drawSierpinskiCarpet(g, xOL + i * b, yOL + j * h, b, h);
                }
        }
    }

    private BufferedImage create(final int width, final int height,
        final boolean alpha)
    {
        BufferedImage buffer =
            gConfig.createCompatibleImage(width, height, alpha
                ? Transparency.TRANSLUCENT : Transparency.OPAQUE);
        return buffer;
    }
}

CSS

<nav>
         <ul id="menu">
             <li><a href="#">Random</a></li>
             <li><a href="#">Stand</a></li>
            <li><a href="#>NAN</a></li>
            <li><a href="#">Tap</a></li>
            <li><a href="#">Mart</a></li>
            <li><a href="#">Dom</a></li>
        </ul>
        </nav>

正如您所看到的，虽然列表是水平的，但它并不像图像中那样“无序”/分散。有什么建议吗？

Answer 1

您可以使用<li>和位置属性position: relative手动定位top, right, bottom, left - 元素。我在这里为你写了一个小例子：https://jsfiddle.net/c5bw1dbe/

我希望这有帮助！

创建水平无序列表？

1 个答案: