我正在嘗試在我的 nextjs 專案和 MUI 庫中使用多種語言，并且我正在使用語言環境設定我的專案方向的正文元素。
const App = (props: MyAppProps) => {
const {
Component,
emotionCache = clientSideEmotionCache,
pageProps,
} = props;
const router = useRouter()
const { locale } = router;
return (
<CacheProvider value={emotionCache}>
<ThemeProvider theme={getTheme(theme)}>
<CssBaseline />
<GlobalStyles styles={{
body:{
backgroundColor:getTheme(theme).palette.Background.background,
direction:locale==="fa"?"rtl":"ltr"
}
}}/>
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
};
這對 text-align 屬性作業正常，但我在定位元素時遇到問題，因為定位中有 right、left、bottom、top 屬性，并且沒有 start 和 end 屬性。例如：
width:50px;
height:50px
position: relative;
left:2px
我的元素具有上述位置，我想在 RTL 方向語言（如波斯語）中從左側定位 2px，但我想在 LTR 方向語言（如英語）中將其定位在右側 2px。它通常是用開始和結束屬性完成的，但在 css 中我不知道，因為在位置屬性中沒有什么東西。所以我的問題是如何定位開始和結束的元素基礎？
uj5u.com熱心網友回復：
display 將您的元素置于 flex 模式并使用 justify-content, ... 功能。去 這里輸入鏈接描述
uj5u.com熱心網友回復：
我無法理解您的代碼，但問題與 CSS 相關，這就是我為您提供一些想法的原因。讓你有一個元素<div id="element" >Your contents</div>
現在，將此 css 放在您的樣式頁面中->
#element.rtl {
left: 2px;
}
#element.ltr {
right: 2px;
}
希望這會幫助你。如果沒有，請在此處評論。
uj5u.com熱心網友回復：
您必須設定相對于 div 元素的位置，以及嵌套 div 元素的最小或正確位置。
像這樣構建您的 HTML：
<div id="container">
<div class="top left"></div>
<div class="top right"></div>
</div>
CSS
#container {
position: relative;
}
#container > * {
position: absolute;
}
.left {
left: 2px;
}
.right {
right: 2px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/384947.html
標籤：javascript html css 反应 下一个.js
上一篇：Javascrit.createTextNode輸出給出錯誤
下一篇：使用XPath獲取SVG中的元素