0

我是 HTML/CSS 新手，需要一些关于文本对齐的帮助。文本是链接，我想将两个链接对齐到页面左侧，一个链接到右侧。任何人都可以帮忙吗？这是我的代码

BACK 和 HOME 按钮是左对齐，MISC 是右对齐

谢谢堆它让我发疯！

HTML **

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/portfolio.css">
    </head>

    <body>

        <div class="menu">
            <ul>
                <a href="index.html">BACK</a>
                <a href="index.html">HOME</a>
                <a href="index.html">MISC</a>
                </ul>
        </div>
    </body>
</html>

CSS **

body
{
    background-color: #ffffff;
}

.menu
{
    font-family:"HelveticaNeue-Light", "Arial";
    font-size: 75%;
    color: #1f4462;
    text-align:left;
    margin-left: -36px;
    margin-top: -3px;
    font-style: normal;
    letter-spacing: 1px;
    word-spacing: 3px;
}

a:link 
{
    color:#1f4462;
    text-decoration:none;
}

a:visited 
{
    color:#1f4462;
    text-decoration:none;
}

a:hover 
{
    color:#1f4462;
    text-decoration:none;
}

a:active 
{
    color:#1f4462;
    text-decoration:none;
}
4

7 回答 7

2

将以下 css 添加到您的链接中。演示

#left{
    float:left;
}

#center{
    position: absolute;
    left: 48%;
}

#right{
    float:right;
}
于 2013-09-09T13:11:13.173 回答
0

纯 CSS 解决方案可以是：

a:nth-child(3n) {
    float:right;
}

或者

a:nth-last-child(1) {
    float:right;
}

另外，编写有效的 HTML。如果您只有列表的锚元素，那么您必须使用nav标签，并且不需要使用额外的 div。

<body>
    <nav class="menu">
            <a href="index.html">BACK</a>
            <a href="index.html">HOME</a>
            <a href="index.html">MISC</a>
    </nav>
</body>

margin-left从中删除.menu。

于 2013-09-09T13:06:50.137 回答
0 
<div class="menu">
        <ul>
            <a class="pull-left" href="index.html">BACK</a>
            <a class="pull-left" href="index.html">HOME</a>
            <a class="pull-right" href="index.html">MISC</a>
        </ul>
</div>

如您所见，我已在您的链接中添加了类。现在让我们在样式表文件中添加一些类声明：

.pull-left {
 float: left;
}

.pull-right {
 float: right;
}
于 2013-09-09T12:58:51.507 回答
0

HTML

<div class="menu">
            <ul>
                <a href="index.html">BACK</a>
                <a href="index.html">HOME</a>
                <a href="index.html" class="right">MISC</a>
                </ul>
        </div>

css

           .right{
            float:right;
        }

在这里演示

于 2013-09-09T13:00:32.420 回答
0

使用 style="float:left;" 对于 BACK 和 HOME 按钮和 style="float:right;" 对于杂项。把 style="display:inline;" 用于 ul 标签。

于 2013-09-09T12:57:33.567 回答
0

干得好。

工作演示

编码：

<a href="index.html" style="float: right;">MISC</a>

我希望这就是你要找的。

于 2013-09-09T12:57:45.937 回答
0

您需要更好的 HTML 结构......即，在 ul 元素中......您正在添加未标记为列表项的列表项。可以使用以下代码修复对齐问题。

由于时间原因，我删除了对外部样式表的引用，并在 head 标记中添加了样式。您可以从 head 标记中删除样式并将它们读入样式表以维护 HTML 最佳实践。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
<head>
    <style type="text/css">
        body
            {
                background-color: #ffffff;
            }

            .menu
            {
                font-family:"HelveticaNeue-Light", "Arial";
                font-size: 75%;
                color: #1f4462;
                text-align:left;
                margin-left: -36px;
                margin-top: -3px;
                font-style: normal;
                letter-spacing: 1px;
                word-spacing: 3px;
            }

            .menu ul {

            }

            .menu ul li { display: inline-block; }

            .menu ul li.misc {
                float: right;
            }

            a:link 
            {
                color:#1f4462;
                text-decoration:none;
            }

            a:visited 
            {
                color:#1f4462;
                text-decoration:none;
            }

            a:hover 
            {
                color:#1f4462;
                text-decoration:none;
            }

            a:active 
            {
                color:#1f4462;
                text-decoration:none;
            }  
    </style>
</head>

<body>

    <div class="menu">
        <ul>
            <li><a href="index.html">BACK</a></li>
            <li><a href="index.html">HOME</a></li>
            <li class='misc'><a href="index.html">MISC</a></li>
            </ul>
    </div>
</body>
于 2013-09-09T13:05:36.630 回答