在CSS中製作超鏈接的縮進

-1

如何爲超鏈接製作縮進？我試過這個代碼但沒有成功。在CSS中製作超鏈接的縮進

a { 
 
    text-decoration: none; 
 
    text-indent: 20px; 
 
}

<a href="#h"> html </a>

有很多方法可以做到這 –

，如果你不想縮進所有的HREF什麼？ –

你有沒有嘗試填充左：20px？ –

如果你不想讓所有的超鏈接都縮進，你可以用一個唯一的id將它包裝在<div>的周圍;這是一個替代解決方案。

HTML：

<div id="indented"> 
    <a href="#h"> html </a> 
</div>

CSS：

a{ 
    text-decoration:none; 
} 

#indented { 

    text-indent:20px; 

}

2017-01-06 22:21:39

謝謝..我試過了，結果是正確的 –

@RazanBalatiah歡迎。那麼你可能喜歡接受答案。這會告訴Stack找到了解決方案。勾上向上/向下箭頭下方的複選標記。 –

文本縮進不avalaible用於內聯元素

https://www.w3.org/wiki/CSS/Properties/text-indent

a { 
 
    text-decoration: none; 
 
    text-indent: 20px;/* not avalaible for inline elements */ 
 
    display: inline-block; 
 
}

<a href="#h"> html </a>

填充可以幫助

a { 
 
    text-decoration: none; 
 
    text-indent: 20px;/* not avalaible for inline elements */ 
 
    padding-left:20px;; 
 
}

<a href="#h"> html </a>

2017-01-06 22:09:06

將這個變成一個CSS文件，然後使用link標籤將其鏈接到您的HTML文件：

a { 
     text-decoration:none; 
     text-indent:20px; 
    }

我強烈的建議是去與CSS文件，它是一個更清潔，並允許你瞄準更多的元素，而不僅僅是具體的錨定標記

2017-01-06 22:09:12

text-indent用於塊或內嵌塊元素。因此，您可以將display: inline-block;或display: block;分配給a標籤並獲得所需的效果。這裏有一個演示http://codepen.io/anon/pen/WRvOQd

2017-01-06 22:11:37

回答