สอบถามตัว CSS ใช้กับ radio แล้วตัวหนังสืออยู่ห่างกับปุ่มครับ

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

Moderator: mindphp

ภาพประจำตัวสมาชิก
[email protected]
PHP VIP Members
PHP VIP Members
โพสต์: 1961
ลงทะเบียนเมื่อ: 21/11/2022 9:20 am

สอบถามตัว CSS ใช้กับ radio แล้วตัวหนังสืออยู่ห่างกับปุ่มครับ

โพสต์ที่ยังไม่ได้อ่าน โดย [email protected] »

ตัว radio option มันอยู่ห่างกับข้อความ ขออนุญาตสอบถามตรงส่วนนี้ผมต้องแก้ไขเป็นรูปแบบใดครับ
2023-01-17 17_28_57-Window.png
2023-01-17 17_28_57-Window.png (10.62 KiB) Viewed 804 times

index.html

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

 <div class="form-group sex">
                <label for="sex">เพศ&nbsp;</label>          
                <input  type="radio" id="sex" value="value1" name="group1"> ชาย
                <input class="sex-select" type="radio" id="sex" value="value2" name="group1"> หญิง
            </div> 
css

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

.sex-select {
  position: absolute;
  left: 15em;
  width: 357px;
  height: 14px;
  top: 7.3em;
}
ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16183
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

Re: สอบถามตัว CSS ใช้กับ radio แล้วตัวหนังสืออยู่ห่างกับปุ่มครับ

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

อาจจะคลุมส่วน input 2 อันนี้ด้วย span แล้วกำหนด padding และไม่ต้องกำหนด position: absolute; เพราะจะจัดตำแหน่งได้ยาก เอาไว้ใช้กับวัตถุลอยบน element อื่น

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

<div class="form-group sex">
                <label for="sex">เพศ&nbsp;</label>          
                <span class = "sex-select"><input  type="radio" id="sex" value="value1" name="group1"> ชาย</span>
                <span class = "sex-select"><input type="radio" id="sex" value="value2" name="group1"> หญิง</span>
            </div> 
ภาพประจำตัวสมาชิก
[email protected]
PHP VIP Members
PHP VIP Members
โพสต์: 1961
ลงทะเบียนเมื่อ: 21/11/2022 9:20 am

Re: สอบถามตัว CSS ใช้กับ radio แล้วตัวหนังสืออยู่ห่างกับปุ่มครับ

โพสต์ที่ยังไม่ได้อ่าน โดย [email protected] »

eange08 เขียน: 17/01/2023 6:07 pm อาจจะคลุมส่วน input 2 อันนี้ด้วย span แล้วกำหนด padding และไม่ต้องกำหนด position: absolute; เพราะจะจัดตำแหน่งได้ยาก เอาไว้ใช้กับวัตถุลอยบน element อื่น

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

<div class="form-group sex">
                <label for="sex">เพศ&nbsp;</label>          
                <span class = "sex-select"><input  type="radio" id="sex" value="value1" name="group1"> ชาย</span>
                <span class = "sex-select"><input type="radio" id="sex" value="value2" name="group1"> หญิง</span>
            </div> 
ขอบคุณครับ แก้ไขได้แล้วครับ

ในหน้า index.html แก้ไขตามที่แจ้ง และในส่วน CSS ไปเพิ่มเติม

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

.sex-select {
  display: flex;
  left: 15em;
  width: 101px;
  height: 14px;
  top: 7.3em;
  align-items: center;
}

ขอบคุณครับ
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41231
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามตัว CSS ใช้กับ radio แล้วตัวหนังสืออยู่ห่างกับปุ่มครับ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

การกำหนดขนาดลงใน css จะทำให้หน้าจอไม่ยืดหยุ่น

ลองดู

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

<div class="form-group">
  <label>Gender</label>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gender" id="male" value="male">
    <label class="form-check-label" for="male">Male</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gender" id="female" value="female">
    <label class="form-check-label" for="female">Female</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gender" id="non-binary" value="non-binary">
    <label class="form-check-label" for="non-binary">Non-binary</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gender" id="prefer-not-to-say" value="prefer-not-to-say">
    <label class="form-check-label" for="prefer-not-to-say">Prefer not to say</label>
  </div>
</div>
มาจาก บอก chat.openai.com ว่า
write css for Bootstrap sex selection
คำตอบแรกจะได้ แบบ เป็น Listbox มาต้องบอกต่อว่า
convert it to radio button
จะได้โค้ดตามตัวอย่างข้างบน ลองไปรับใช้ดู ลบ คัวเลือกให้เหลือเท่าที่ต้องการ
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 69