我有那些紫色的線條（如我的螢屏所示）。
我正在做一些條件渲染，我想知道我是否可以洗掉所有這些紫色線條。
我聽說洗掉所有的 div 并添加 React.Fragments 可能會有幫助，這就是我目前所做的。但是問題仍然存在。
如果有人能告訴我問題可能來自哪里，我將不勝感激！
如果有人能告訴我問題可能來自哪里，我將不勝感激
主視圖/Render 1
<div className="user-infos"/span>>
<h4><u> 引數</u></h4>
{ (componentState == "edit") ?
<form>>
<Render 3/>/span>
</form>/span>
: (componentState == "index"/span>) ?
<Render 2/>
: (componentState == "delete"/span>) ?
<React.Fragment>/span>
<p> 你確定要離開我們嗎？</p>你確定要離開我們？
<p>如果是，你必須輸入你的電子郵件并按 "確認"。</p>/span>
<form>
<input type="text" />
< input type="submit" value="confirm email"/>
</form>/span>
<span>/span>
<button> Delete ur account</button>
<button> 取消 </button>
</span>/span>
</React.Fragment>
: ""。
}
</div>
Render 2
return (
<React.Fragment>
<p> 用戶名：John </p>
<p> 時區：倫敦 </p>
<span>
<button> 編輯資料 </button>
<button> 洗掉賬戶 </<button>>
</span>
</React.Fragment>
Render 3
return (
<React.Fragment>
<label for="email"> Username 。
<input type="text"/>
</label>/span>
<label for="text"> 時區。
<span>
<select
onChange={options}。
<options>>
</select>/span>
</span>
</label>
<button type="submit"> 保存個人資料 </button>
<button> 取消 </button>
</React.Fragment>
);
uj5u.com熱心網友回復：
默認情況下，chrome會給你的html添加樣式。在<p>的情況下，它將以下css添加到你的元素中。
如果你想讓空白消失，你需要在你的<p>元素上設定margin: 0;以覆寫chrome的樣式。
uj5u.com熱心網友回復：
當有可用空間供元素展開時，就會出現紫色的破折號線。見這里。根據我對 Flexboxes 和其他 display 型別的比較，帶有紫色背景的紫色破折號是專門針對 Flexboxes 內的空間（CSS 中的 display:flex）。
我需要看到你的CSS來確定，但我想象有justify-content: space-between告訴flexbox均勻地分配元素之間的剩余空隙，以及flex-direction: column告訴flexbox垂直地堆疊子元素。
如果是這種情況，你可以洗掉justify-content: space-between，并使用flexbox的造型來改變你想要的東西的外觀。我發現這個網站很有幫助。Flexbox的完整指南
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/321908.html
標籤：