CSS ครับ แบบนี้แก้ยังครับ

เริ่มโดย nadia_diana, 21 มีนาคม 2009, 22:01:38

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1
การกระทำของผู้ใช้

nadia_diana

21 มีนาคม 2009, 22:01:38
โค้ด เลือก

<p><label class="formtext">ที่อยู่: </label><span style="position:relative;"><? echo $studio->getStudioaddress(); ?></span></p>


นี่คือ code ผมครับ ซึ่งมันได้ output แบบนี้ครับ

                        ที่อยู่: 1234 หมู่บ้านสุขสบาย ถ.ราษฎรพัฒนา สะพานสูง
สะพานสูง ก.ท.ม. 10240

สังเกตว่า ตรง สะพานสูงมันจะขึ้นบรรทัดใหม่ ไม่ตรงกับ 1234 อ่ะครับ ไม่รู้ว่าต้องแก้ยังไง

อ้อ นี่ code css ผมนะครับ

โค้ด เลือก

label.formtext{
width: 25em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
font-weight:bold;
padding-right:10px;
vertical-align:bottom;
}
รวมแฟชั่นเสื้อผ้า : http://www.islamweddingfashion.com

เป็นติ่งไรเนี่ย

#1
21 มีนาคม 2009, 22:48:15
<label class="formtext"> <p>ที่อยู่: 1234 หมู่บ้านสุขสบาย ถ.ราษฎรพัฒนา สะพานสูง
<div class="test">สะพานสูง ก.ท.ม. 10240</div>
</label><span style="position:relative;"><? echo $studio->getStudioaddress(); ?></span></p>

label.formtext{
   width: 25em;
   float: left;
   text-align: left;
   margin-right: 0em;
   display: block;
   font-weight:bold;
   padding-right:0px;
   vertical-align:bottom;
   padding-left: 11px;
}
.test {
   float: left;
   margin-left: 22px;
   padding-left: 22px;
}


.test ปรับ margin padding ดูคับ
ลองดูคับ  :-*

thenetxx

#2
21 มีนาคม 2009, 22:56:26
เพิ่ม float: left; ใน formtext ก็พอครับ :)
Develop site but can't develop life
ASIA

g-ji

#3
22 มีนาคม 2009, 00:55:25 แก้ไขล่าสุด: 22 มีนาคม 2009, 01:05:28 โดย g-ji
อ้างถึงจาก: nadia_diana ใน 21 มีนาคม 2009, 22:01:38
โค้ด เลือก

<p><label class="formtext">ที่อยู่: </label><span style="position:relative;"><? echo $studio->getStudioaddress(); ?></span></p>


นี่คือ code ผมครับ ซึ่งมันได้ output แบบนี้ครับ

                        ที่อยู่: 1234 หมู่บ้านสุขสบาย ถ.ราษฎรพัฒนา สะพานสูง
สะพานสูง ก.ท.ม. 10240

สังเกตว่า ตรง สะพานสูงมันจะขึ้นบรรทัดใหม่ ไม่ตรงกับ 1234 อ่ะครับ ไม่รู้ว่าต้องแก้ยังไง

อ้อ นี่ code css ผมนะครับ

โค้ด เลือก

label.formtext{
width: 25em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
font-weight:bold;
padding-right:10px;
vertical-align:bottom;
}


หน้าเว็บขนาดเท่าไรหรอ ??
ที่ต้องการคือแบบนี้หรือเปล่า ??

อ้างถึงที่อยู่: 1234 หมู่บ้านสุขสบาย ถ.ราษฎรพัฒนา สะพานสูง
        สะพานสูง ก.ท.ม. 10240

หรือคล้ายๆ ในรูปแบบนี้ เวลาขึ้นบรรทัดใหม่ให้อยู่ เท่ากับบรรทัดบน


โค้ด เลือก
label.formtext{
width: 10em;
float: left;
text-align: right;
margin: 0.5em;
padding:1em;/*เพิ่มอันนี้ มีผลประมาณ 4 บรรทัดตัวอักษร*/
display: block;
font-weight:bold;
padding-right:10px;
vertical-align:bottom;
}
โค้ด เลือก

<p><label class="formtext">ที่อยู่:</label><span>1234 หมู่บ้านสุขสบาย ถ.ราษฎรพัฒนา สะพานสูง สะพานสูง ก.ท.ม. 1024012315646123156486745641231231564564651231231231231231 asdfasdcvasdgasdfgsdfgdfgsagfsdafsdfgsdffgdsfgdsfsagsdgfr hsdfbasdfgsdfgsadfsdgasdvasgsafdasdfsdafdasrtfsdvf asfsdgdsgasdfgf</span></p>

ถ้า width:25em; เท่าเดิมที่ให้โค้ดมา(เดิมๆ หมดเลย) มันจะอยู่เกือบๆ กลางจอนะ (ขึ้นอยู่กับขนาดของหน้า) ตามรูป



ถ้าจะให้ดี เอา div คลุมมันไว้ด้วยดีกว่า

โค้ด เลือก
<div><p><label class="formtext">ที่อยู่:</label><span>1234 หมู่บ้านสุขสบาย ถ.ราษฎรพัฒนา สะพานสูง สะพานสูง ก.ท.ม. 1024012315646123156486745641231231564564651231231231231231 asdfasdcvasdgasdfgsdfgdfgsagfsdafsdfgsdffgdsfgdsfsagsdgfr hsdfbasdfgsdfgsadfsdgasdvasgsafdasdfsdafdasrtfsdvf asfsdgdsgasdfgf</span></p></div>

ตั้ง id/class ให้ div ซะหน่อย แล้วกำหนดขนาดความกว้าง แล้วใส่ overflow:hidden; ซะหน่อย

**ขึ้นอยู่กับขนาดของหน้าเว็บที่ตั้งไว้ ตามรูปตั้งไว้ 980px**
พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้