在右边框上放置 link

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 link位于右边框如下图：

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

Answer 1

这里是working fiddle for your problem.

我只是为您的 link 添加了一个 ID，名为 "floatingLink"，将 link 的颜色更改为白色 (#fff) 并将其绝对定位。更改顶部 and/or 左侧属性以调整位置。

实现它的代码是：

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

Answer 2

先把a标签挡住，然后你需要用绝对位置设计它，然后你可以把它放在它父元素的任何地方element.Last你可以把它放在它里面任何你想放的地方，这里是我做的demo，我觉得可以满足你的要求：

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>

试试这个....

在右边框上放置 link

Put a link over the right border

html

css

nav