मैं एक FontAwesome के चिह्न का उपयोग कर रहा हूँ। आइकन ऊपर की लाइन पर दिख रहा है और टेक्स्ट के बगल में नहीं जैसा कि यहां देखा गया है:

Menu

प्रासंगिक कोड:

<div className="block col-1">
    <p><span><FontAwesomeIcon icon={faUser} className="fa-fw" /><h5>My Account</h5></span></p>
    <hr />
    <p><a>Dashboard</a></p>
    <p><div role="menuitem" onClick={this.showInvoices.bind(this)}>Invoices</div></p>
    <p><div role="menuitem" onClick={this.showOrders.bind(this)}>Orders</div></p>
</div>

मैंने यहां से निश्चित-चौड़ाई वाले वर्ग का उपयोग करने का प्रयास किया है, बिना किसी परिवर्तन। मैंने float: left की भी कोशिश की है, जिसने इसे एक ही लाइन पर रखा लेकिन इसे सबसे बाएं किनारे पर ले जाया गया। मैंने अपने मेनू div को चौड़ा करने का भी प्रयास किया। मुझे किसकी याद आ रही है?

0
Randy 26 नवम्बर 2021, 19:23
इसे आजमाएं <p><span style={{display: 'flex'}}><FontAwesomeIcon icon={faUser} className="fa-fw" /><h5>My Account</h5></span></p>
 – 
Saad Mehmood
26 नवम्बर 2021, 19:27
1
सबसे आसान उपाय शायद FontAwesome टैग को h5 टैग के अंदर डालना है
 – 
Nick
26 नवम्बर 2021, 19:28
वह अर्थपूर्ण HTML नहीं है। ब्लॉक तत्व इनलाइन तत्वों के अंदर नहीं होने चाहिए।
 – 
Nick
26 नवम्बर 2021, 19:32
<h5> में डिफ़ॉल्ट रूप से display: block होगा, जो इसे अपनी ही लाइन पर मजबूर करेगा।
 – 
phuzi
26 नवम्बर 2021, 19:32

1 उत्तर

सबसे बढ़िया उत्तर

h5 तत्व एक ब्लॉक तत्व है, इसका मतलब है कि यह उस पंक्ति में एकमात्र तत्व होने जा रहा है। <FontAwesomeIcon /> को <h5 /> में रखें और इसे काम करना चाहिए:

<div className="block col-1">
    <h5>
        <FontAwesomeIcon icon={faUser} className="fa-fw" />My Account
    </h5>
    <hr />
    <p><a>Dashboard</a></p>
    <p><div role="menuitem" onClick={this.showInvoices.bind(this)}>Invoices</div></p>
    <p><div role="menuitem" onClick={this.showOrders.bind(this)}>Orders</div></p>
</div>

पुनश्च: उस पंक्ति में <span /> और <p /> IMO आवश्यक नहीं हैं।

1
donnikitos 26 नवम्बर 2021, 19:30
न केवल span अनावश्यक है, एक इनलाइन तत्व के अंदर ब्लॉक तत्व डालना उचित HTML नहीं है
 – 
Nick
26 नवम्बर 2021, 19:33