อยากทราบวิธีการจัดรูปแบบ css ให้เรียงอยู่ใน บรรทัดเดียวตลอด ทั้งตอนย่อ หรือ ตอนเต็มจอ

[Ittichai_chupol]

อยากทราบว่าถ้าหากต้องการที่จะทำให การแสดงผลของ ส่วน listbox1 ปุ่มสลับ และ listbox2 อยู่ในแนวกันตลอด ทั้งตอนเต็มจอ หรือ ตอน ย่อจอลงมา

ซึ่งสิ่งที่อยากได้จะมีลักษณะการจัดเรียงประมาณนี้ครับ

Selection_999(2209).png (29.38 KiB) Viewed 1899 times

โดยปัญหาที่พบเจอตอนนี้คือเมื่อมีการย่อจอลงมาจะพบว่า การจัดเรียงมีการทับซ่อนกัน หรือ การจัดเรียงมีตำแหน่งที่ผิดเพี้ยนไปจากเดิม

จึงอยากทราบว่าควรปรับแก้ไขได้อยากไรบางครับ เช่นการที่จะลดจำนวนคำของประโยคที่อยู่ใน listbox ลงก็ได้ครับเวลาที่จะย่อ

โคดที่ผมใช้สร้างการแสดงผลของส่วนที่เป้นหาครับ

โค้ด: เลือกทั้งหมด

        
       
       //listbox อันแรก
                                   <div class="col-md-4">
                                    <div  class="form-group">
                                        <select  class="list_1"  name="list_box_a" id="list_box_a">
                                            <?php foreach ($data2 as $v) { ?>

                                                <option value="<?php echo $v['currency_id']; ?>" ><?php echo $v[$lang_currency_name] ?></option>

                                            <?php }
                                            ?>
                                            <option value='THB'><?php echo $lang_thb ?>
                                        </select> 
                                    </div>

                                </div>
                                //ปุ่มสลับ
                                <div class="col-md-4">
                                    <div  class="form-group">
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <button class="btn btn-info btn_list" align="center" id="swap" name='swap' 
                                                onclick="swapCurrency();" ><i class='fas fa-retweet' ></i></button>  
                                    </div>
                                </div>
                                    //listbox อันที่สอง
                                <div class="col-md-4">
                                    <div  class="form-group">
                                        <select  class="list_2" name="list_box_b" id="list_box_b">
                                            <?php
                                            foreach ($data2 as $v) {
                                                ?>
                                                <option value="<?php echo $v['currency_id']; ?>"><?php echo $v[$lang_currency_name] ?></option>

                                            <?php }
                                            ?>
                                            <option value='THB' selected><?php echo $lang_thb ?>
                                        </select> 
                                    </div>
                                </div>
                                

ส่วนที่ผลลลัพธ์ที่ผมได้ทำครับ

Selection_999(2208).png (22.92 KiB) Viewed 1899 times