Question

我是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;
}

Answer 1

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

#left{
    float:left;
}

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

#right{
    float:right;
}

Answer 2

使用style =“float：left;”对于BACK和HOME按钮和style =“float：right;”对于MISC。 put style =“display：inline;”对于ul标签。

Answer 3

你走了。

<强> WORKING DEMO

守则：

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

我希望这就是你要找的东西。

Answer 4

<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;
}

Answer 5

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;
        }

<强> DEMO HERE

Answer 6

您需要在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>

Answer 7

纯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。

我需要帮助在同一个div，CSS HTML中左右对齐文本

7 个答案: