css文本缩进等效于右侧

时间:2012-08-10 22:12:40

标签: css

我有右侧对齐的文字,我想让它稍稍向左推,就像你在右侧使用文字缩进的文字一样。任何解决方案吗? 我一直在试用保证金,但是IE9在第一个菜单项(?)上的保证金加倍。

继承人css:

h99
{ padding: 0px;
    font-family: lucida, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 40px;
}

#menublock
{ width: 230px;
    height: auto;
    float: left;
    text-align:right;
    margin-right: 0px;
}

ul
{ list-style-type: none;
  margin:0;
  padding:0;
  overflow: hidden;
}

ul a:link, ul a:visited
{ display: block;
  width: 210px;
  background: transparent;
  text-align: right;
  text-transform: uppercase;
  text-decoration: none;
    height: 40px;
    color: #ffffff;
    padding: 0px;
    margin: 10px;
}

ul a:hover, .selected
{ background: #484848 !important;
  color: #ffffff !important;
} 

菜单只是一个横向菜单。

6 个答案:

答案 0 :(得分:13)

没有,不幸的是,在css,hower中没有文本突出,你可以使用文本方向direction:rtl;来获取一些短文本,这样缩进就会出现在另一边。

答案 1 :(得分:5)

简单的解决方案是在"之前应用"文本元素的CSS样式否定了direction: rtl;

的所有副作用
&:before {
      content: ' ';
      width: 100px;
      float: right;
      height: 5px;
} 

答案 2 :(得分:3)

执行以下操作

text-indent: 60px;
direction: rtl;
text-align: left;

f.ardelian 指出:标点符号将出现在行的开头,所以abc。将出现.abc

答案 3 :(得分:2)

仅CSS的解决方案,不会弄乱文本方向(SEO和翻译友好吗?),没有浮点数,没有其他元素,后缩进宽度易于修改:

&::after {
    content: "\0000a0";
    height: 1em;
    letter-spacing: 1rem;
}

答案 4 :(得分:1)

我为我所做的工作是:

text-indent: 20px;
padding-right: 40px;

答案 5 :(得分:0)

我需要查看您的代码但是旧浏览器的问题解决方案是包含空跨度并应用宽度:

<style>
span.right-adjust {
  display:inline-block;
  width:5px;
}
</style>

<div>Your text here<span class="right-adjust"></span></div>

如果不向我们提供代码,很难说出你想要的东西。您也可以应用浮动:右;

有许多方法可以解决旧浏览器和CSS的问题。

希望这有帮助