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

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 3130
Joined: 19/09/2018 10:33 am

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

Post by Ittichai_chupol » 19/11/2019 10:52 am

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

ซึ่งสิ่งที่อยากได้จะมีลักษณะการจัดเรียงประมาณนี้ครับ
Selection_999(2209).png
Selection_999(2209).png (29.38 KiB) Viewed 50 times
โดยปัญหาที่พบเจอตอนนี้คือเมื่อมีการย่อจอลงมาจะพบว่า การจัดเรียงมีการทับซ่อนกัน หรือ การจัดเรียงมีตำแหน่งที่ผิดเพี้ยนไปจากเดิม

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

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

Code: Select all

        
       
       //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
Selection_999(2208).png (22.92 KiB) Viewed 50 times

Return to “HTML CSS”

Users browsing this forum: No registered users and 5 guests