मैं एक दूसरे के बगल में दो divs चाहता हूँ। एक में एक बटन होता है और दूसरा कुछ पाठ। मुझे कुछ मार्जिन वाले बटन से पहले टेक्स्ट चाहिए। लेकिन अंत गलत दिशा में होता है। मेरा कोड:

.helpButton {
        display: inline-block;  
        float: right;
    }

    .helpText {
        margin-right: 5em;
        float: right;
        display: inline-block;
    }

    .help-block {

        display: inline-block;  
        overflow: auto;
        float: right;
    }
<div class="help-block">
                <div class="helpText">@Resource.FooterHelp</div>
                <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">@Resource.FooterHelpLink</button>
            </div>

मुझे पता है कि इस मंच पर इस तरह के समान प्रश्न हैं, लेकिन मेरे लिए काम करने के लिए विषय नहीं मिल सकता है

आपके सभी सुझावों के लिए आप सभी का धन्यवाद!

1
AllramEst 25 जुलाई 2017, 10:25

7 जवाब

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

<div> को <span> में बदलें और आप बहुत सारे CSS पर बचत करेंगे:

.helpText {
  margin-right: 10px;
}

.help-block {
  overflow: auto;
  float: right;
}
<div class="help-block">
  <span class="helpText">Some text</span>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
</div>
0
Miro 25 जुलाई 2017, 10:35

इस कोड को आजमाएं।

तार्किक रूप से आपको button तत्व को text तत्व से पहले रखना होगा क्योंकि दोनों के लिए हम float:right का उपयोग कर रहे हैं। तो पहले यह टेक्स्ट को राइट और फिर बटन में डालेगा। इसलिए इस चीज़ से बचें, हमें केवल एलिमेंट सीक्वेंस को एक्सचेंज करने की जरूरत है। सीएसएस में कोई बदलाव करने की जरूरत नहीं है।

.helpButton {
  float: right;
}

.helpText {
  margin-right: 10px;
  display: inline-block;
  float: right;
}


}
.help-block {
  display: inline-block;
  overflow: auto;
  float: right;
}
<div class="help-block">
		   <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
  <div class="helpText">Some text</div>
  
</div>
0
Emipro Technologies Pvt. Ltd. 25 जुलाई 2017, 10:30

कंटेनर एलिमेंट के डिस्प्ले को बदलने से, जो आपके मामले में .help-block है, inline-block से flex में बदल जाएगा। कम से कम, यदि आप यही हासिल करने की कोशिश कर रहे हैं?

.help-block {
  display: flex;
  overflow: auto;
  float: right;
}
.helpButton {
  float: right;
}

.helpText {
  margin-right: 10px;
  display: inline-block;
  float: right;
}

.help-block {
  display: flex;
  overflow: auto;
  float: right;
}
<div class="help-block">
  <div class="helpText">Some text</div>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
</div>
0
kevin b. 25 जुलाई 2017, 10:30

आप inline-flex का उपयोग कर सकते हैं,

.helpButton {
  float: right;
}

.helpText {
  margin-right: 10px;
  display: inline-flex;
  float: right;
}


.help-block {
  display: inline-flex;
  overflow: auto;
  float: right;
}
<div class="help-block">
  <div class="helpText">Some text</div>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
</div>
0
Hash 25 जुलाई 2017, 10:32

मैं एक फ्लेक्सबॉक्स का उपयोग करता हूं और फ्लोट से बचता हूं। इस तरह, सभी तत्व दस्तावेज़ प्रवाह का पालन करेंगे (और आपको कम सीएसएस कोड की आवश्यकता होगी)।

.helpText {
  margin-right: 5em;
}

.help-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
<div class="help-block">
  <div class="helpText">@Resource.FooterHelp</div>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">@Resource.FooterHelpLink</button>
</div>
0
Gerard 25 जुलाई 2017, 10:34
.helpButton {
  float: left;
}

.helpText {
  margin-right: 10px;
  display: inline-block;
 
}


}
.help-block {
  display: inline-block;
  overflow: auto;
  
}
<div class="help-block">
  <div class="helpText">Some text</div>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
</div>
-2
DBtalwar 25 जुलाई 2017, 10:32

फ्लोट्स का उपयोग न करें (राइट फ्लोट्स तत्वों के थेरऑर्डर को उलट देता है)। जैसा कि आप display: inline-block का उपयोग कर रहे हैं, एक साधारण टेक्स्ट-एलाइन काम करेगा

.help-block {

    display: inline-block;  
    text-align: right
}

.helpButton {
    display: inline-block;
}

.helpText {
    display: inline-block;
}
<div class="help-block">
  <div class="helpText">Some text</div>
  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button>
</div>
1
Fernando Paredes Murillo 25 जुलाई 2017, 10:34