मैं लोरेम इप्सम के साथ इनलाइन प्रदर्शित करने के लिए निम्नलिखित कोड में "अंत" बनाने की कोशिश कर रहा हूं, और यह पता नहीं लगा सकता कि कैसे। क्या यह संभव है? मैं HTML संरचना को बिल्कुल भी नहीं बदल सकता। (न ही मैं जेएस, आदि जोड़ सकता हूं)

#parent {
  width: 300px;
  border: 1px solid red;
}

#block2 a {
  color: #00f;
}
<div id="parent">
  <div id="block1">
    <a> Lorem ipsum dolor sit amet, consectetur elit.  dolor nulla. Duis lob.</a>
  </div>
  <div id="block2">
    <a>The end</a>
  </div>
</div>

मैं चाहता हूं कि यह इस तरह दिखे:यहां छवि विवरण दर्ज करें

0
jacobe 16 जून 2018, 01:17

2 जवाब

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

यदि आप CSS में परिवर्तन करने में सक्षम हैं, तो यह एक आसान उपाय है। बस display: inline का उपयोग करें, जिससे तत्व केवल उतना ही स्थान लेगा जितना आवश्यक हो (<span> तत्व की तरह कार्य करना)।

हालांकि, अगर संयोग से, आप ऐसा करने में असमर्थ हैं, तो आपकी स्थिति को देखते हुए इसे हासिल करने के लिए मैं आपके बारे में सोच भी नहीं सकता।

#parent {
  width: 300px;
  border: 1px solid red;
}

#block1, #block2 {
  display: inline;
}

#block2 a {
  color: #00f;
}
<div id="parent">
  <div id="block1">
    <a> Lorem ipsum dolor sit amet, consectetur elit.  dolor nulla. Duis lob.</a>
  </div>
  <div id="block2">
    <a>The end</a>
  </div>
</div>
2
KatoFett 16 जून 2018, 01:26

आपको दो ब्लॉक कंटेनर को display: inline पर सेट करना होगा:

#parent {
  width: 300px;
  border: 1px solid red;
}

#block2 a {
  color: #00f;
}

#block1, #block2 {
  display: inline;
}
<div id="parent">
  <div id="block1">
    <a> Lorem ipsum dolor sit amet, consectetur elit.  dolor nulla. Duis lob.</a>
  </div>
  <div id="block2">
    <a>The end</a>
  </div>
</div>
1
OneManBand 16 जून 2018, 01:32