1. 首頁
  2. 問答
  3. 把一個鏈接在右邊框

把一個鏈接在右邊框

2016-08-20 37 views
-1

下面的腳本會產生這樣的顯示：把一個鏈接在右邊框

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

enter image description here

我想google.com鏈接位於右側邊框，如下圖所示： enter image description here

如何修復這些腳本？ 謝謝你的幫助。

來源

2016-08-20 priyo

+0

嘗試使用'position：absolute'，然後將'left'設置爲一定的像素數量。你能告訴你試過了什麼嗎？ – 4castle

回答

0

Output

這裏是一個working fiddle for your problem。

我簡單地爲鏈接添加了一個ID，名爲「floatingLink」，將鏈接的顏色更改爲白色（#fff），並將其完全定位。更改頂部和/或左側屬性以調整位置。

是實現它的代碼是：

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

來源

2016-08-20 13:58:45

0

塊中的一個標籤，然後再需要用絕對位置來設計它，那麼你可以在其雙親的元素中的任意位置放置element.Last你可以把它放在任何你想要的裏面，這裏是我所做的演示，我認爲它能夠滿足你的要求：

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

來源

2016-08-20 14:16:56 Crabime

0 
<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>

試試這個....

來源

2016-08-20 15:26:57

+0

\t Google –

+0

爲了把一個代碼塊中的答案，並在降價4個空格縮進它。確保正確縮進代碼。我已經做了編輯以嘗試解決您的問題。 – 4castle

相關問題

 相關問題