text-indent | 易学教程

How does exactlly line-height work in this case

阅读更多关于 How does exactlly line-height work in this case

问题 In this question positioning text of anchor within a div and given the same code which I repeat here: HTML Markup <div id="header"> <a href="cattle.html" class="current">Cattle Farms</a> </div> CSS Style #header a { width: 100%; height: 100%; display: block; font-size: 25px; } Answer div#header a { width: 100%; height: 100%; display: block; text-indent: 20px; line-height: 350px; } Fiddle My question is why does not the line-height make the a break out of the div 回答1: It does break out of the

Css nested list with active item to fill the whole row

阅读更多关于 Css nested list with active item to fill the whole row

问题 I have an unlimited nested list that serves as a menu. I have an .active list item to add a background color to the anchor. I would like it to fill the whole row with the background color, not start a few tabs in. That means I would need the a tag to fill the whole row and at the same time have the text appear indented. .menu { background: #eee; width: 300px; } .menu > ul { margin-left: -25px; } ul { list-style: none; margin: 0; padding: 0; } li { padding-left: 25px; } li.active a {

Padding for background color of an inline text WITH text-indent

阅读更多关于 Padding for background color of an inline text WITH text-indent

问题 I am basically trying to do THIS with a paragraph that contains text-indent, but can't get it because the display:inline won't allow text-indent. Any ideas? 回答1: Using pseudo elements I've created a JSFiddle example that uses span elements which are inline and then adds before and after pseudo elements to add additional spacing in front and at the end of each highlighted block of text. In case you need to manipulate amount of that space adjust font-size within those pseudo elements and you

Label text is wrapped but not indent second line

阅读更多关于 Label text is wrapped but not indent second line

问题 I have a form with limited width, however the label text maybe longer than form width, so the text was wrapped to multiple lines. My problem is that first line is indented because of input element but second line is not, it makes the form not nice. Do you have any idea to make the second, third ... will be indented as first line, only use CSS? Actual: My Expectation is This is my example for the case: http://jsbin.com/UvaqISO/2/edit 回答1: Edit you css like this: .form { width: 300px; } label {

hiding text using “text-indent”

阅读更多关于 hiding text using “text-indent”

问题 I'm trying to hide some text inside an <li> element using CSS by setting text-indent: -999px; . For some reason this doesn't work when I set the direction of the document to "rtl" (right to left - my site is in Hebrew). When direction is "rtl" the text still shows... Anyone knows why, and a way around this? 回答1: Along with text-indent: -9999px try using display: block; . It solved for me. Additionally, if you need the li elements to float horizontally (e.g. a horizontal menu), use float: left

hiding text using “text-indent”

阅读更多关于 hiding text using “text-indent”

I'm trying to hide some text inside an <li> element using CSS by setting text-indent: -999px; . For some reason this doesn't work when I set the direction of the document to "rtl" (right to left - my site is in Hebrew). When direction is "rtl" the text still shows... Anyone knows why, and a way around this? Along with text-indent: -9999px try using display: block; . It solved for me. Additionally, if you need the li elements to float horizontally (e.g. a horizontal menu), use float: left; . What about setting direction:ltr on the elements you're trying to give negative text-indent ? Demo:

Text indent is not working in ie7

阅读更多关于 Text indent is not working in ie7

问题 I am working on a website and on the top navigation bar there is a search box, I applied the following css on the search submit button #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; } My Problem is in IE7 the text indent is not working please help me if you want to see the demo you can view it by clicking

webView渲染富文本

阅读更多关于 webView渲染富文本

概述：在后台富文本编辑器中编辑了富文本，要求在app里面呈现； 1、分析富文本数据，通过富文本编辑后的文本数据格式如下： <img src=\"/ue/2019-06-12/6CFFB1F9FAE64946AFC177E3468856FB.jpg\" title=\"\" alt=\"20161015234335_71.jpg\" />锁定期2019-06-13至2019-06-22 2019-06-23日 00：00期满自动转入活期。 <p style=\"text-indent: 0px;

How to indent the first line of a paragraph in CKEditor

阅读更多关于 How to indent the first line of a paragraph in CKEditor

I'm using CKEditor and I want to indent just the first line of the paragraph. What I've done before is click "Source" and edit the style to include text-indent:12.7mm; , but when I click "Source" again to go back to the normal editor, my changes are gone and I have no idea why. My preference would be to create a custom toolbar button, but I'm not sure how to do so or where to edit so that clicking a custom button would edit the with the style attribute I want it to have. Depending on which version of CKE you use, your changes most likely disappear because ether the style attribute or

Text indent after the first line in a paragraph

阅读更多关于 Text indent after the first line in a paragraph

- 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. In the above paragraph, I would like to use CSS to make all lines after the first line to automatically indent some space so that each line stays right after the - in the first line. HTML - 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