right/cstring left right/auto中文产品说明

Right-to-Left Language Support & WordPress Codex
Interested in functions, hooks, classes, or methods? Check out the new !
Right-to-Left Language Support
Adding support for language written in a
direction is easy - it's just a matter of overwriting all the horizontal positioning attributes of your CSS stylesheet in a separate stylesheet file named rtl.css.
Start with your main theme stylesheet (usually style.css).
Save this file as rtl.css
Add the following attributes to the body selector:
direction:
unicode-bidi:
One by one, go over the CSS selectors and do the following: Remove any irrelevant attributes such as font styling attributes, colors, vertical positioning, width and height etc. Change the value (from right to left and vice-versa) of the following attributes:
text-direction
text-align:
text-align:
Add RTL versions of relevant images.
Some images are clearly suited only for one direction (arrows for example). Create a horizontally flipped version of those images.
Mirror the following attributes, and zero the original
background-position
right/left positioning
.commentslink{
background:url(&./images/comments.gif&) no-repeat 0 3
padding-left:15
margin: 2px 4px 0px 12
.commentslink{
background:url(&./images/comments-rtl.gif&) no-repeat 100% 3
padding-left:0;
padding-right:15
margin: 2px 12px 0px 4
For buttons that have hidden text using text-indent, you need to change its value from negative to positive:
.image-button{
text-indent:-99999
.image-button{
text-indent:99999
The RTL Tester plugin allows you to easily switch the text direction of the site:
P.S. This plugin allows to VIEW ONLY RTL. i.e. How would your site look like when its Text Direction is changed & this change isn't viewed by the viewers, (unless the whole CSS is changed).
You'll need to manually adjust pixel positioned backgrounds. If the original value is '0' you can change it to 100%
Positioning: remember to assign the 'auto' value to the original selector
WordPress default visual text editor doesn't support writing in RTL languages like Hebrew, Persian and Arabic. Therefore, if you're willing to write a post in one of those languages, you should either :
Reinstall / Change your WordPress version to be in that language, which fixes this issue with allowing you as a default to write in RTL.
Use this plugin:
which adds two buttons to the TinyMCE editor (if you have it) to enable changing text direction from
Left to Right (LTR) and Right to Left (RTL).
Codex Resources
Code is PoetryCSS里面的属性margin-right: margin-left:是什么意思??? 还有 line-height是什么意思_百度知道
CSS里面的属性margin-right: margin-left:是什么意思??? 还有 line-height是什么意思
提问者采纳
解析margin的自动值auto定义一个方向为auto,可以理解为此方向随便,自由设置DIV水平居中的方法是 margin:0 line-height:是指的行高
提问者评价
谢谢啦 大概明白了
来自团队:
其他类似问题
为您推荐:
其他2条回答
margin-right:
auto 右外边距自动
margin-left:auto 左外边距自动
line-height:行高
16:12:55锈庵赋砸CSS里面的属性margin-right: margin-left:是什么意思??? 还有 line-height是什么意思
margin的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁显示器老出现full exit:auto left/right enter:menu急急急急急急急_百度知道
显示器老出现full exit:auto left/right enter:menu急急急急急急急
提问者采纳
这个应该是你显示器超出显示范围,要自动调整,叫你按显示器的MENU键,然后选择AUTO
其他类似问题
为您推荐:
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对…一、CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)以下为引用的内容: &style& #wrapper { width: 100px! /* IE7+FF */ width: 80 /* IE6 */ } &/style&2, IE6/IE77对FireFox以下为引用的内容: *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. &style& #wrapper { #wrapper { width: 120 } /* FireFox */ *html #wrapper { width: 80} /* ie6 fixed */ *+html #wrapper { width: 60} /* ie7 fixed, 注意顺序 */ } &/style&注意: *+html 对IE7的HACK 必须保证HTML顶部有如下声明:&!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”&二、万能 float 闭合关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上 即可,屡试不爽.以下为引用的内容:&style& /* Clear Fix */.clearfix:after { content:”.”; display: height:0; clear: visibility: } .clearfix { display:inline- } /* Hide from IE Mac */ .clearfix {display:} /* End hide from IE Mac */ /* end of clearfix */ &/style&&三、其他兼容技巧1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.) 2).水平居中. margin: 0(当然不是万能) 3, 若需给 a 标签内内容加上 样式, 需要设置 display:(常见于导航标签) 4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题. 5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表) 6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示, 但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针 对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。 现在写一个CSS可以这样:以下为引用的内容: #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE7 */ 那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。2 css布局中的居中问题 主要的样式定义如下:body {TEXT-ALIGN:} #center { MARGIN-RIGHT: MARGIN-LEFT: } 说明: 首先在父级元素定义TEXT-ALIGN:这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。 但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:MARGIN-LEFT: ” 需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div, 只要在每个拆出的div里定义MARGIN-RIGHT:MARGIN-LEFT: 就可以了。3 盒模型不同解释#box{ width:600 //for ie6.0- width:500 //for ff+ie6.0} #box{ width:600px!important //for ff width:600 //for ff+ie6.0 width /**/:500 //for ie6.0-}4 浮动ie产生的双倍距离#box{ float: width:100 margin:0 0 0 100 //这种情况之下IE会产生200px的距离 display: //使浮动忽略} 这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);#box{ display: //可以为内嵌元素模拟为块元素 display: //实现同一行排列的的效果 diplay:IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度, 正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。 比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样: #box{ width: 80 height: 35}html&body #box{ width: height: min-width: 80 min-height: 35}6 页面的最小宽度min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个, 而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个&div& 放到 &body& 标签下,然后为div指定一个类: 然后CSS这样设计: #container{ min-width: 600 width:expression(document.body.clientWidth & 600? “600px”: “auto” );} 第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。7 清除浮动.hackbox{ display: //将对象作为块元素级的表格显示}或者.hackbox{ clear:} 或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持, 所 以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: height: 0; clear: visibility:}8 DIV浮动IE文本产生3象素的bug左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.#box{ float: width:800}#left{ float: width:50%;}#right{ width:50%;}*html #left{ margin-right:-3 //这句是关键} HTML代码&div id=”box”& &div id=”left”&&/div& &div id=”right”&&/div&&/div&9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用 属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.10 IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。 解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。11 高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用 margin 或paddign 时。 例: &div id=”box”& &p&p对象中的内容&/p& &/div& CSS:#box {background-color:# } #box p {margin-top: 20margin-bottom: 20 text-align: } 解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0overflow:}或者为DIV加上border属性。六、CSS兼容要点分析IE vs FFCSS 兼容要点:DOCTYPE 影响 CSS 处理FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 widthFF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式div 的垂直居中问题: vertical-align: 将行距增加到和整个DIV一样高 line-height:200 然后插入文字,就垂直居中了。缺点是要控制内容不要换行cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找^^1、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!margin:28}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!2、IE5 和IE6的BOX解释不一致IE5下div{width:300margin:0 10px 0 10}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!width /**/:340margin:0 10px 0 10px},关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题4、关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为& type=”text/java”&就可以了七、10个你未必知道的CSS技巧1、CSS字体属性简写规则一般用CSS设定字体属性是这样做的:以下为引用的内容:font-weight:font-style:font-varient:small-font-size:1line-height:1.5font-family:verdana,sans-但也可以把它们全部写到一行上去:&font: bold italic small-caps 1em/1.5em verdana,sans-真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。2、同时使用两个类一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。事实上,你可以这样:&p&…&/p&同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。补充:对于一个ID,不能这样写&p id=”text side”&…&/p&也不能这样写3、CSS border的缺省值通常可以设定边界的颜色,宽度和风格,如:border: 3px solid #000这位把边界显示成3像素宽,黑色,实线。但实际上这里只需要指定风格即可。如果只指定了风格,其他属性就会使用缺省值。一般地,Border的宽度缺省是medium,一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话,就不用设那么多了。4、CSS用于文档打印许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:&link type=”text/css” rel=”stylesheet” href=”/blog/stylesheet.css” media=”screen” /& &link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” /&第1行就是显示,第2行是打印,注意其中的media属性。但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。要想了解更多,可以看“打印差异”这一篇。5、图片替换技巧一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。比如你想整个卖东西的图标,你就用了这个图片:&h1&&img src=”/blog/widget-image.gif” alt=”Buy widgets” /&&/h1&这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:&h1&Buy widgets&/h1&但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:h1 { background: url(/blog/widget-image.gif) no- height: image height text-indent: -2000px }注意把image height换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。6、CSS box模型的另一种调整技巧这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:#box { width: 100 border: 5 padding: 20px }这样调用它:&div id=”box”&…&/div&这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。但用CSS也可以达到同样的目的,让它们显示效果一致。#box { width: 150px } #box div { border: 5 padding: 20px }这样调用:&div id=”box”&&div&…&/div&&/div&这样,不管什么浏览器,宽度都是150点了。7、块元素居中对齐如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:#content { width: 700 margin: 0 auto }你会使用 &div id=”content”& 来围上所有元素。这很简单,但不够好,IE6之前版本会显示不出这种效果。改CSS如下:body { text-align: center } #content { text-align: width: 700 margin: 0 auto }这会把网页内容都居中,所以在Content中又加入了text-align: left 。8、用CSS来处理垂直对齐垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。CSS方法是什么呢?对了,把这些文字的行高设为 2em:line-height: 2em ,这就可以了。9、CSS在容器内定位CSS的一个好处是可以把一个元素任意定位,在一个容器内也可以。比如对这个容器:#container { position: relative }这样容器内所有的元素都会相对定位,可以这样用:&div id=”container”&&div id=”navigation”&…&/div&&/div&如果想定位到距左30点,距上5点,可以这样:#navigation { position: left: 30 top: 5px }当然,你还可以这样:margin: 5px 0 0 30px注意4个数字的顺序是:上、右、下、左。当然,有时候定位的方法而不是边距的方法更好些。10、直通到屏幕底部的背景色在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部,用表格是很方便的,但如果只用这样的CSS:#navigation { background: width: 150px }较短的导航条是不会直通到底部的,半路内容结束时它就结束了。该怎么办呢?不幸的是,只能采用欺骗的手段了,给这较短的一栏加上个背景图,宽度和栏宽一样,并让它的颜色和设定的背景色一样。body { background: url(/blog/blue-image.gif) 0 0 repeat-y }此时不能用em做单位,因为那样的话,一旦读者改变了字体大小,这个花招就会露馅,只能使用px。&& , && 本站html5资讯教程均分享互联网转载请注明出处,本文固定地址:Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
I installed a template on WordPress that contains Flexslider. My language is written Right-To-Left (RTL). When the page is RTL, the Flexslider stops and no images appear. How can I resolve this issue?
15.4k104056
flex slider doesn't support rtl languages. The only way to fix it is to make
the div holding the slider direction: ltr
On your theme, if the slider on the home page find a file called index.php find the div that's holding the slider and all this code
style="direction:"
this will display your articles on the slier perfectly
To fix text direction from rtl find a file called flexslider.css on your theme and on the line holding the code
.flexslider .slides & li{ (line #25 for me) add this:
text-align:
direction:
These tow steps fixed it for me. Good luck
3,059135277
fatma's answer doesn't work for me. What works is modifying the .flex-viewport by setting direction: ltr:
.flex-viewport { max-height: 2000 -webkit-transition: all 1 -moz-transition: all 1 transition: all 1 direction: }
2,59711124
To fix directional navigation, these rules in your own stylesheet should override flexslider rules:
/* Flexslider RTL */
.flex-direction-nav .flex-next {background-position: 0 0; left: -36 right:}
.flex-direction-nav .flex-prev {background-position: 100% 0; right: -36 left:}
.flexslider:hover .flex-next {left: 5 right:}
.flexslider:hover .flex-prev {right: 5 left:}
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {opacity: 1; right: 0; left:}
.flex-direction-nav .flex-next {opacity: 1; left: 0; right:}
You need to change both JS and CSS for it to work. Luckily it didn't require much work. I forked the project and added the support at . Give it a try.
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Stack Exchange
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled}

我要回帖

更多关于 cstring left right 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信