标签: text-indent

<p> - A Reuters reporter in Surkhrod district in Nangarhar province, where 
villagers said the raids took place, said Afghan police fired at the crowd 
after some of them started throwing stones at local government buildings.</p>

Run Code Online (Sandbox Code Playgroud)

它类似于列表位置设置为外部的列表项,但我不想使用列表.

您能想到实现这种效果的最简单方法是什么？更少的额外HTML标记会更好.

非常感谢大家.

html css indentation text-indent

bob*_*obo

2016 03-31

47
推荐指数

2
解决办法

5万
查看次数

文本缩进在ie7中不起作用

我正在一个网站上工作,在顶部导航栏上有一个搜索框,我在搜索提交按钮上应用了以下css

#submit {
   background: url("img/new-search-icon.png") no-repeat scroll -1px 0 #FFFFFF;
   border:0 none;
   cursor:pointer;
   display:block;
   height:21px;
   padding:0;
   position:absolute;
   right:0;
   text-indent:-9999px;
   top:0;
   width:20px;
   z-index:2;
}

Run Code Online (Sandbox Code Playgroud)

我的问题是在IE7中文本缩进不起作用请帮助我如果你想看到你可以点击这里查看的演示点击这里.请帮我.

html css internet-explorer text-indent internet-explorer-7

use*_*631

2014 01-06

25
推荐指数

3
解决办法

2万
查看次数

文本缩进:-9999px是一种用图像替换文本的糟糕技术,有哪些替代方案？

这篇文章说我们应该避免使用这种技术.这个说它很棒.谷歌在CSS文件中寻找text-indent: -9999px;并惩罚你是真的吗？:|

我使用的财产很多隐藏的文本.例如,我有一个由图标表示的按钮:

<a href="#" class="mybutton">do Stuff</a>

CSS:

.mybutton{
  text-indent: -9999px;
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}

Run Code Online (Sandbox Code Playgroud)

我没有看到任何替代我的代码.如果我用图像替换它,我会自动为每个按钮图像获得+20 HTTP请求.

如果我将链接设置为空,则它的访问次数较少,因为屏幕阅读器不会知道它是什么.空链接看起来很奇怪,可能Google也不喜欢这样......

那么处理这种情况的最佳方法是什么？

html css seo text-indent

Ale*_*lex

2012 01-23

25
推荐指数

2
解决办法

1万
查看次数

使用"text-indent"隐藏文本

我试图<li>通过设置使用CSS 隐藏元素中的一些文本text-indent: -999px;.
出于某种原因,当我将文档的方向设置为"rtl"(从右到左 - 我的网站是希伯来语)时,这不起作用.
当方向是"rtl"时,文字仍然显示......
任何人都知道为什么,并绕过这个？

css text-indent right-to-left

Cri*_*toe

2013 06-05

12
推荐指数

3
解决办法

4万
查看次数

为什么文本缩进在其容器具有:before /:after伪元素时不起作用？(FX /歌剧)

今天进入这个怪癖.

http://jsfiddle.net/UJAjD/3/

您会注意到在Firefox 7和Opera中,灰色框中包含单词"Next".CSS包含一个text-indent属性,该属性应该将该文本移动到其容器之外.在IE或Chrome中查看此页面会以应有的方式显示该页面.至少你认为它应该显示的方式.

这是一个已知的错误？有解决方法吗？

css firefox opera text-indent pseudo-element

jku*_*zak

2011 10-06

11
推荐指数

1
解决办法

3432
查看次数

如何将文本缩进一个字符宽度

前提条件是我使用monospace作为我的font-family,但它似乎没有正常工作,我尝试了一些解决方案,但是它们的工作正常,我的HTML结构如下:

<!DOCTYPE html>
<style>
  body {
    font-family: monospace;
    letter-spacing: 0;
    word-spacing: 0;
    font-size: 32px; /* large enough to see the effect */
  }
  div:last-of-type {
    padding-left: 1em; /* what's the value? */
  }
</style>
<div>123456</div>
<div>abcdef</div>

Run Code Online (Sandbox Code Playgroud)

用em

em应该等于计算的font-size值,但是padding-left:1em; 不起作用:
使用px

padding-left:32px; 输出与padding-left相同的输出:1em; .
用ex

ex应该是字母'x'的计算高度,它也不起作用:
用ch

好的,webkit 不支持ch作为css单元.

那么如何编写css来精确缩进第二个div的一个字符宽度,也就是说,第一个'0'应该左对齐字母'b',没有任何偏差.

css fonts text-indent

ota*_*tay

lucky-day

9
推荐指数

2
解决办法

5066
查看次数

如何在CSS中使用自定义图标自定义的复选框的标签中添加悬挂缩进？

我正在尝试使用font-awesome自定义复选框的外观,并使标签的所有文本正确缩进.我已经自定义了复选框的外观,这使得通常的方法缩进文本不起作用,因为我隐藏了实际的复选框(请参阅下面的CSS).

目前,我想获得以下(左),而我想要右边的那个:

目前来看期望的观点

我使用了以下代码(参见JSFiddle):

CSS

受这个简单的CSS复选框的启发,我使用以下命令格式化我的复选框font-awesome:

input[type=checkbox] { 
    display:none;
} 

input[type=checkbox] + label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f096";
    letter-spacing: 10px;
    cursor: pointer;
}

input[type=checkbox]:checked + label:before { 
    content: "\f046";
} 

input[type=checkbox]:checked + label:before { 
    letter-spacing: 8px;
}

Run Code Online (Sandbox Code Playgroud)

HTML

<input type="checkbox" id="box1" checked="">
<label for="box1">Item 1: some long text...</label>
<br>
<input type="checkbox" id="box2" checked="">
<label for="box2">Item 2: some long text...</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Item 3: some long text...</label>

Run Code Online (Sandbox Code Playgroud)

我试图修改margin-left和text-indent的属性label …

html css checkbox text-indent font-awesome

nbe*_*hat

lucky-day

8
推荐指数

1
解决办法

6499
查看次数