有問題過渡到「從右至左」，在HTML

我有以下的HTML代碼，在一個語言編寫，可讀性從左至右，英語：有問題過渡到「從右至左」，在HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>Title</title> 
<link rel="stylesheet" type="text/css" href="site.css"> 
<meta charset="utf-8"> 
<link rel="shortcut icon" href="favicon.ico" /> 
</head> 
<body> 
<div id="page"> 
    <div id="banner"></div> 
    <div id="tagline">blah blah blah</div> 
    <div id="menu"> 
    <div id="innermenu"> 
     <div class="menuitem activeitem"><a href="somepage1.html">blah</a></div> 
     <div class="menuitem"><a href="somepage2.html">blah</a></div> 
     <div class="menuitem"><a href="somepage3.html">blah</a></div> 
     <div class="menuitem"><a href="somepage4.html">blah</a></div> 
     <div class="menuitem"><a href="somepage5.html">blah</a></div> 
     <div class="menuitem"><a href="somepage6.html">blah</a></div> 
    </div> 
    </div> 
    <div id="main"> 
    <div id="languagebar" class="mainelement"> 
     <a href="somepage1.html"><img src="french.png" alt="french" height="4" width="6" id="french" class="flag" /></a> 
     <a href="somepage1.html"><img src="english.png" alt="english" height="4" width="6" id="english" class="flag" /></a> 
    </div> 
    <div id="content" class="mainelement"> 
     <h1>blah</h1> 
     <p>blah blah blah</p> 
     <h1>blah</h1> 
     <p>blah blah blah</p> 
     <h1>blah</h1> 
     <p>blah blah blah</p> 
    </div> 
    </div> 
    <div id="footer">blah blah blah</div> 
</div> 
</body> 
</html>

我必須翻譯成「從右到左」的語言。暫且不論嗒嗒的翻譯，我第一次做以下的事情：我的第一行後添加以下行：

<html dir="rtl" lang="XX">

其中XX是向左語言右側的兩個字母的HTML面額。這增加了預期的行爲：語言欄確實在右邊，mainelement「table」在左邊，但是由於一些blah的翻譯太長了，他們被語言欄給吞噬了。然後，我嘗試別的東西：我刪除了

<html dir="rtl" lang="XX">

線，也做了以下內容：我分別更換了所有

<h1>...</h1>

和

<p>...</p>

從mainelement通過

<h1><blockquote dir="rtl" lang="XX">...</blockquote></h1>

和

<p><blockquote dir="rtl" lang="XX">...</blockquote></p>

這把文字從右到左很好，然後我想設置管理處從右向左和mainelement語言欄，但沒有成功。我究竟做錯了什麼？

編輯

CSS代碼如下

body 
{ 
background-color: #aaaaaa; 
margin: 0px; 
} 

#page 
{ 
margin: auto; 
width: 940px; 
background-color: #95bfca; 
background-image: linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%); 
background-image: -o-linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%); 
background-image: -moz-linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%); 
background-image: -webkit-linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%); 
background-image: -ms-linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0e2e7', endColorstr='#006680', GradientType=0); 
} 

#banner 
{ 
margin: auto; 
width: 936px; 
height: 122px; 
background-image: url("banner.jpg"); 
} 

#tagline 
{ 
margin: 10px; 
padding: 10px; 
border: 2px solid #783201; 
font: italic 22px calibri, sans-serif; 
text-align: center; 
background-color: #fff5db; 
} 

#main 
{ 
padding: 20px 15px; 
overflow: hidden; 
position: relative; 
} 

.mainelement 
{ 
background-color: #fff5db; 
border: 2px solid #783201; 
padding: 10px; 
} 

#main h1 
{ 
margin: 20px 0px; 
font-weight: bold; 
font-style: italic; 
font-family: calibri, sans-serif; 
font-size: 15px; 
} 

#main div p, #main div li 
{ 
font: 15px calibri, sans-serif; 
} 

#main a 
{ 
font: 15px calibri, sans-serif; 
color: #783201; 
} 

#main .expandable 
{ 
text-align: center; 
padding-left: 5px; 
background-image: url("expand.png"); 
background-repeat: no-repeat; 
background-position: left center; 
} 

.underline 
{ 
text-decoration: underline; 
} 

.italic 
{ 
font-style: italic; 
} 

.inlineh1 
{ 
font: italic bold 15px calibri, sans-serif; 
} 

#languagebar 
{ 
margin: 20px 15px; 
width: 100px; 
float: left; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
} 

.flag 
{ 
margin: 5px; 
border: none; 
} 

#french 
{ 
background-image: url("French.png"); 
float: left; 
} 

#english 
{ 
background-image: url("English.png"); 
float: right; 
} 

#content 
{ 
width: 700px; 
float: right; 
} 

#footer 
{ 
margin: auto; 
font: 12px calibri, sans-serif; 
color: #ffffff; 
text-align: center; 
} 

#footer a 
{ 
font: 12px calibri, sans-serif; 
color: #ffffff; 
} 

/*** menu ***/ 

#menu 
{ 
background-color: #783201; 
border-top: 3px solid #783201; 
border-bottom: 3px solid #783201; 
} 

#innermenu 
{ 
border-top: 1px solid #ffffff; 
border-bottom: 1px solid #ffffff; 
overflow: hidden; 
} 

.menuitem 
{ 
float: left; 
margin: 5px 33px; 
padding-bottom: 10px; 
background-image: url("menutwiddle.png"); 
background-repeat: no-repeat; 
background-position: center bottom; 
} 

.menuitem a 
{ 
font: 18px calibri, sans-serif; 
color: #ffffff; 
text-decoration: none; 
} 

.activeitem 
{ 
    background: url('menu-line.png') repeat-x bottom left; 
    position: relative; 
} 

.activeitem:before 
{ 
    position: absolute; 
    top: 0; 
    left: -6px; 
    bottom: 0; 
    width: 6px; 
    content: ' '; 
    background: url('menu-ball.png') no-repeat bottom left; 
} 

.activeitem:after 
{ 
    position: absolute; 
    top: 0; 
    right: -6px; 
    bottom: 0; 
    width: 6px; 
    content: ' '; 
    background: url('menu-ball.png') no-repeat bottom left; 
} 

/*** form ***/ 

input[type=text], textarea 
{ 
    border: 1px solid #783201; 
} 

input[type=submit] 
{ 
    padding: 5px 15px; 
    background: #783201; 
    border-radius: 5px 5px; 
    color: #fff; 
    border: 0; 
    box-shadow: 1px 1px 2px #888; 
} 

input[type=submit]:active 
{ 
    box-shadow: 0 0 0 #fff; 
}

來源

2015-07-05 ujsgeyrr1f0d0d0r0h1h0j0j_juj

我已經試過了HTML代替總結如何處理'rtl'快速簡單。如果我錯過了需要隨時提問的信息。如果你有一個特定的問題，如果你在你的問題中添加一些CSS，會更容易理解！ –

對不起，我忘了在問題中添加css，現在我將添加它 –

我繼續如下：我創建了這個rtl。css文件：

body 
{ 
direction: rtl; 
unicode-bidi: embed; 
} 

#page 
{ 
} 

#banner 
{ 
} 

#tagline 
{ 
} 

#main 
{ 
} 

.mainelement 
{ 
} 

#main h1 
{ 
} 

#main div p, #main div li 
{ 
} 

#main a 
{ 
} 

#main .expandable 
{ 
padding-right: 5px; 
} 

.underline 
{ 
} 

.italic 
{ 
} 

.inlineh1 
{ 
} 

#languagebar 
{ 
float: right; 
} 

.flag 
{ 
} 

#french 
{ 
float: right; 
} 

#english 
{ 
float: left; 
} 

#content 
{ 
float: left; 
} 

#footer 
{ 
} 

#footer a 
{ 
} 

/*** menu ***/ 

#menu 
{ 
} 

#innermenu 
{ 
} 

.menuitem 
{ 
float: right; 
} 

.menuitem a 
{ 
} 

.activeitem 
{ 
    background: url('menu-line.png') repeat-x bottom right; 
} 

.activeitem:before 
{ 
    right: -6px; 
    background: url('menu-ball.png') no-repeat bottom right; 
} 

.activeitem:after 
{ 
    left: -6px; 
    background: url('menu-ball.png') no-repeat bottom right; 
} 

/*** form ***/ 

input[type=text], textarea 
{ 
} 

input[type=submit] 
{ 
} 

input[type=submit]:active 
{ 
}

，並在任何地方需要（也就是在HTML文件中的語言XX）

<link rel="stylesheet" type="text/css" href="site.css">

與

來源

2015-07-13 19:11:59

你應該自動換行，包含內一個div RTL郎，然後分配dir='rtl'它。

之後，您可以使用下面的選擇添加自定義樣式：

html[dir="rtl"] { 
    /* css */ 
}

如果您正在使用margin或padding這些類型的屬性會自動翻轉：

margin: 15px 10px 5px 20px; 
/* turns into */ 
margin: 20px 5px 10px 15px;

你會發現很多關於這個內部的信息在W3.org Tutorials about Right to Left Sites。

來源

2015-07-05 19:53:04

有問題過渡到「從右至左」，在HTML

回答

相關問題