Question

以下脚本会生成如下显示：

<style>
    nav { position: fixed; left: 10em; top: 5em; border-right: 100px solid #0000cc; box-shadow: 4px 0 5px rgba(0,0,0,0.8);}
</style>
<body>
    <nav><a href="http://www.google.com/">Google</a>
        <ul>
            <li>White</li>
            <li>Blue</li>
            <li>Yellow</li>
            <li>Black</li>
            <li>Green</li>
            <li>Orange</li>
            <li>Pink</li>
            <li>Red</li>
            <li>Magenta</li>
        </ul>
    </nav>
</body>

我想google.com链接位于右边框，如下所示：

如何修复这些脚本？谢谢你的帮助。

Answer 1

这是working fiddle for your problem。

我只是在您的链接中添加了一个ID，名为＆＃34; floatingLink＆＃34;，将链接的颜色更改为白色（#fff）并将其定位。更改顶部和/或左侧属性以调整位置。

实现它的代码是：

#floatingLink {
  color:#fff;
  position : absolute;
  left: 7.5em; 
  top: 1em;
  z-index: 1;
}

Answer 2

首先阻止一个标签然后你需要用绝对位置设计它然后你可以把它放在它的父元素的元素内。最后你可以把它放在你想要的任何地方，这里是我做的演示，我认为它可以满足您的要求：

a {
    display: block;
    padding-left: 100px;
    position: absolute;
    color: red;
    padding-top:15px;
}

Answer 3

<html>
    <style>
    nav {
        position: fixed;
        left: 10em;
        top: 5em;
        border-right: 100px solid #0000cc;
        box-shadow: 4px 0 5px rgba(0,0,0,0.8);
    }
    a {
        color: white;
        position: relative;
        top: 4.5em;
        right: 19em;
    }
    </style>
    <body>
        <nav>
            <ul>
                <li>White</li>
                <li>Blue</li>
                <li>Yellow</li>
                <li>Black</li>
                <li>Green</li>
                <li>Orange</li>
                <li>Pink</li>
                <li>Red</li>
                <li>Magenta</li>
            </ul>
        </nav>
        <a href="http://www.google.com/" style="float:right;">Google</a>
    </body>
</html>

试试这个......

在右边框上添加一个链接

3 个答案: