मेरे पास सामान की एक पंक्ति में निम्नलिखित चयन हैं जिन्हें मैं दाईं ओर बेहतर संरेखित/स्थान से बाहर करना चाहता हूं:

enter image description here

अर्थात। "लाइसेंस मात्रा" के आगे का चयन करें। मैं संख्या को दाईं ओर और अधिक स्थानांतरित करना चाहूंगा, क्योंकि यह अधिक दृष्टि से उपयुक्त लगेगा।

नीचे कोड:

<div class="field-group">

  <div style="text-align: center;" class="field field--with-dropdown clearfix">
    <label for="field-qty">License Quantity</label>
    <select style="text-align: center; margin-left: 25em" id="field-qty-num" onchange="qty_change()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
    </select>

  </div>

  <div class="field">
    <label for="field-phone">User Training Manual</label>
    <input id="field-phone" type="text" class="form-control" style="text-align: center;" placeholder="Included for free!" readonly />
  </div>

  <div class="field">
    <label for="field-phone">User Training Videos</label>
    <input id="field-phone" type="text" class="form-control" style="text-align: center;" placeholder="Included for free!" readonly />
  </div>

  <div class="field">
    <label for="field-phone">6 Months Tech Support</label>
    <input id="field-phone" type="text" style="text-align: center;" class="form-control" placeholder="Included for free!" readonly />
  </div>

</div>

किसी भी मदद के लिए धन्यवाद!

0
JDS 11 जुलाई 2018, 00:19
1
आपके <select> पर पहले से ही margin-left है, जो इसे ऑफसेट कर रहा है। बस उस मान को बढ़ाना वही होना चाहिए जो आप चाहते हैं, या संभवतः float से right तक। समस्या को दोहराने में सक्षम हुए बिना अधिक जानकारी प्रदान करना कठिन है। कृपया सुनिश्चित करें कि आपने एक न्यूनतम, पूर्ण, और सत्यापन योग्य उदाहरण प्रदान किया है, जिसमें कोई भी प्रासंगिक सीएसएस या ढांचा शामिल है।
 – 
Obsidian Age
11 जुलाई 2018, 00:26
आप margin-left:25em; के बजाय margin: 0px auto; का उपयोग करना चाह सकते हैं। हालांकि आपका कोड स्निपेट चित्र पर काम नहीं करता है।
 – 
Webber
11 जुलाई 2018, 00:29
margin मात्रा बदलने से कुछ नहीं बदलता
 – 
JDS
11 जुलाई 2018, 00:36
सभी प्रासंगिक सीएसएस प्रदान करें। आपने जो कुछ भी इसका कारण बन रहा है उसे शामिल नहीं किया है। मुझे लगता है कि आपने इनपुट पर एक चौड़ाई निर्धारित की है जिसे बदला जाना चाहिए।
 – 
EternalHour
11 जुलाई 2018, 00:44

2 जवाब

एक विशिष्ट चौड़ाई को हार्डकोड किए बिना, आप फ्लेक्सबॉक्स दृष्टिकोण के लिए जा सकते हैं:

<div style="display:flex;justify-content:space-between;/*or space-evenly*/" class="field field--with-dropdown clearfix"> 
<label for="field-qty">License Quantity</label>
 <select id="field-qty-num" onchange="qty_change()"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option>
<option>6</option> 
<option>7</option>
<option>8</option>
<option>9</option>
</select> </div>
0
DKyleo 11 जुलाई 2018, 00:35
क्षमा करें, लेकिन इससे कोई फर्क नहीं पड़ा, मुझे वही आउटपुट मिला
 – 
JDS
11 जुलाई 2018, 00:37
क्या आपके सीएसएस से आपके चुनिंदा टैग की एक निर्धारित चौड़ाई है?
 – 
DKyleo
11 जुलाई 2018, 00:40

क्या तुम इसे ढूंढ रहे हो ?

कुंजी text-align-last:right; है, जो चुनिंदा वस्तुओं को दाईं ओर लाती है

label {
  display: inline-block;
  min-width: 200px;
  background:#DDD;
}

.itemRight {
  min-width: 200px;
}

select {
   text-align-last:right;
}

#field-qty-num, option {
  width: 204px;
  text-align: center;
}
<div class="field-group">

  <div style="" class="field field--with-dropdown clearfix">
    <label for="field-qty">License Quantity</label>
    <select style="" class="itemRight" id="field-qty-num" onchange="qty_change()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
    </select>

  </div>

  <div class="field">
    <label for="field-phone">User Training Manual</label>
    <input id="field-phone" type="text" class="itemRight form-control" style="text-align: center;" placeholder="Included for free!" readonly />
  </div>

  <div class="field">
    <label for="field-phone">User Training Videos</label>
    <input id="field-phone" type="text" class="itemRight form-control" style="text-align: center;" placeholder="Included for free!" readonly />
  </div>

  <div class="field">
    <label for="field-phone">6 Months Tech Support</label>
    <input id="field-phone" type="text" style="text-align: center;" class="itemRight form-control" placeholder="Included for free!" readonly />
  </div>
</div>
0
Jismon Thomas 11 जुलाई 2018, 00:59