मुझे नहीं पता कि मेरे बटन को सही तरीके से कैसे फ़्लोट किया जाए और मुझे आशा है कि कोई यहां मेरी मदद कर सकता है।

enter image description here

पीला रंग div की पृष्ठभूमि को दर्शाता है। Div की चौड़ाई 50% पर सेट है।

.faq {
  width: 100%;
  padding: 12px 20px;
  display: block;
  box-sizing: border-box;
  width: 50%;
  margin: auto;
  margin-top: 30px;
}

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  background-color: yellow;
}

.save {
  float: right;
  background-color: red;
}
<div class="outerDiv">
  <h2>New FAQ</h2>
  <input type="text" class="faq">
  <br>
  <button class="save" mat-raised-button color="primary">Primary</button>
</div>

मैं क्या गलत कर रहा हूं?

2
IonicMan 3 जून 2021, 18:33

3 जवाब

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

फ्लेक्स कंटेनर में फ्लोट काम नहीं करते हैं

इसके बजाय align-self:flex-end का प्रयोग करें

.faq {
  padding: 12px 20px;
  display: block;
  box-sizing: border-box;
  width: 50%;
  margin: auto;
  margin-top: 30px;
}

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;

  background-color: yellow;
}

.save {
   align-self:flex-end;
  background-color: red;
}
<div class="outerDiv">
    <h2>New FAQ</h2>
    <input type="text" class="faq">
    <br>
    <button class="save" mat-raised-button color="primary">Primary</button>
</div>
3
Paulie_D 3 जून 2021, 18:40
.faq {
  width: 100%;
  padding: 12px 20px;
  display: block;
  box-sizing: border-box;
  width: 50%;
  margin: auto;
  margin-top: 30px;
}

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;

  background-color: yellow;
}

.save {
margin-left:auto;
  background-color: red;
}
<div class="outerDiv">
    <h2>New FAQ</h2>
    <input type="text" class="faq">
    <br>
    <button class="save" mat-raised-button color="primary">Primary</button>
</div>
1
Nikita 3 जून 2021, 18:52

फ्लोट फ्लेक्स के साथ काम नहीं करता है।

आप यहां दो दृष्टिकोण अपना सकते हैं।

दृष्टिकोण # 1: बटन पर align-self: flex-end का प्रयोग करें। इससे बटन आपके माता-पिता के सबसे दाहिने कोने में दिखाई देगा।

दृष्टिकोण #2: यदि आप टेक्स्ट क्षेत्र के साथ संरेखण के संदर्भ में बटन की स्थिति पर अधिक नियंत्रण चाहते हैं, तो आप बटन को div में लपेट सकते हैं और फ्लोट को बटन पर सही रख सकते हैं।

एचटीएमएल

<div class="button-wrapper">
  <button class="save" mat-raised-button color="primary">Primary</button>
</div>

सीएसएस

.button-wrapper {
    width: 50%; /* same as the width of your input*/
}
0
emptyjayy 3 जून 2021, 18:47