ใครเทพ css ช่วยด้วย จะ +1ให้

narupot · 16 ตุลาคม 2013, 08:34:33

ผมติดปัญหาไม่รู้จะใส่คำสั่งอะไรลงไป อีกอย่างก็พึ่งหัดเขียน ผมต้องการให้กล่องมาเรียงด้านขวาในแนวนอน
แต่ใส่คำส่ง flot : left rigth ก็ไม่ได้ผล

peetnawapol · 16 ตุลาคม 2013, 08:37:58

display:inline-block; ครับ

konpunzaa · 16 ตุลาคม 2013, 08:43:18

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
ul{list-style: none}
li{display: inline-block}
</style>
</head>
<body>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
</ul>
</body>
</html>

narupot · 16 ตุลาคม 2013, 10:37:59

อ้างถึงจาก: peetnawapol ใน 16 ตุลาคม 2013, 08:37:58
display:inline-block; ครับ

มันเป็นเหมือนเดิมอ่ะครับ ไม่เปลี่ยนแปลงอะไรเลย *-*

wasantec · 16 ตุลาคม 2013, 10:47:46

ที่เขียนไว้โครงสร้าง class มันเป็นยังไงหลอครับ display: block; float: left; ใส่ถูกจุดหรือป่าว

ultrasad · 16 ตุลาคม 2013, 11:04:36

เอา code มาดูดีกว่าครับ มาแต่ภาพแบบนี้ บอกยาก ไม่รู้คุณวางโครงสร้าง ไว้ยังไง

mean · 16 ตุลาคม 2013, 11:09:30

<ul>
<li>col1</li>
<li>col2</li>
<li>col3</li>
</ul>

แบบแรก
<style>
li {
float:left;
}
</style>

แบบสอง
li{
display:inline-block;
}

sys2528 · 16 ตุลาคม 2013, 11:24:40

ใช่ครับเอามาดูเลยดีกว่าครับ

ที่จริงถ้าอย่างด่านล่างของท่านนี้ก็น่าจะได้แล้วนะครับ

อ้างถึงจาก: mean ใน 16 ตุลาคม 2013, 11:09:30
<ul>
<li>col1</li>
<li>col2</li>
<li>col3</li>
</ul>

แบบแรก
<style>
li {
float:left;
}
</style>

แบบสอง
li{
display:inline-block;
}

narupot · 16 ตุลาคม 2013, 11:44:54

<header>
      <nav>
         <ul class="main-menu">
            <li class="member"><a href="#">สมัครสมาชิก</a></li>
            <li class="member"><a href="#">เข้าสู่ระบบ</a></li>
          </ul>
   <ul class="submenubar">
   <li class="submenu_header"><a href="#">ข่าวไอที</a></li>
<li class="submenu"><a href="#">ข่าวไอทีวันนี้</a></li>
<li class="submenu"><a href="#">ตลาดโลกไอที</a></li>
<li class="submenu"><a href="#">รู้ทันไอที</a></li>
<li class="submenu"><a href="#">สกรุ๊ปไอที</a></li>
<li class="submenu"><a href="#"></a></li>
</ul>
<ul class="submenubar">
   <li class="submenu_header"><a href="#">เทคโนโลยี</a></li>
<li class="submenu"><a href="#">มือถือ & แท็บเล็ต</a></li>
<li class="submenu"><a href="#">คอมพิวเตอร์</a></li>
<li class="submenu"><a href="#">กล้องดิจิตอล</a></li>
<li class="submenu"><a href="#"></a></li>
</ul>
<ul class="submenubar">
   <li class="submenu_header"><a href="#">App & Software</a></li>
<li class="submenu"><a href="#">IOS</a></li>
<li class="submenu"><a href="#">Andoind</a></li>
<li class="submenu"><a href="#">Application</a></li>
<li class="submenu"><a href="#">Software</a></li>
</ul>
<ul class="submenubar">
   <li class="submenu_header"><a href="#">รีวิว & พรีวิว</a></li>
<li class="submenu"><a href="#">มอเตอร์โชว์</a></li>
<li class="submenu"><a href="#">เทคโนโลยีล้ำยุค</a></li>
<li class="submenu"><a href="#">แก็ดเกต</a></li>
<li class="submenu"><a href="#">เกมส์เมอร์</a></li>
</ul>
<ul class="submenubar">
   <li class="submenu_header"><a href="#">บริการของเรา</a></li>
<li class="submenu"><a href="#">ช๊อปปิ้ง</a></li>
<li class="submenu"><a href="#">เว็บดีไซน์</a></li>
<li class="submenu"><a href="#">แอพพริเคชั่น</a></li>
<li class="submenu"><a href="#">เว็บบอร์ด</a></li>
</ul>
</nav>
</header>

ประมาณนี้แหละครับ

Surakrai · 16 ตุลาคม 2013, 11:52:16

ต้องการทำแบบนี้หรือเปล่า http://jsfiddle.net/surakrai/mmgKT/embedded/result/

สคริปต์ http://jsfiddle.net/surakrai/mmgKT/

sys2528 · 16 ตุลาคม 2013, 13:11:13

งั้นก็น่าจะ

.submenubar { float:left;}

น่าจะได้ครับ ลองดูครับ

narupot · 16 ตุลาคม 2013, 13:17:02

อ้างถึงจาก: Surakrai ใน 16 ตุลาคม 2013, 11:52:16
ต้องการทำแบบนี้หรือเปล่า http://jsfiddle.net/surakrai/mmgKT/embedded/result/

สคริปต์ http://jsfiddle.net/surakrai/mmgKT/

ไม่ใช่หรอกครับ แต่ก็ขอบคุณมากครับ +1 ทุกๆท่าน เดียวผมจะเอาไปประยุกกับอย่างอื่น

narupot · 16 ตุลาคม 2013, 13:44:07

ที่จิงผมว่าจะทำแบบว่า เวลาเอาเมาส์ไปชี้ตรงเมนูสีดำๆ จะมีเมนูซับ พวกนี้โชวออกมาอ่ะครับ และก็ถัดมาให้เป็นช่องค้นหา และก็ส่วนของสมาชิก
แต่ฝีมือไม่ถึงเลยค่อยๆ งูๆ ปลาๆ พยายามทำ ผมดิ้นดนมาตั้งแต่ ม.2 จน ม.6 ยังทำไม่สำเร็จ ไม่ค่อยเข้าใจพวก java scrip ว่าจะเรียนสร้างเว็บออนไล์
แม่ก็ป่วย เลยต้องหาตังให้แม่ใช้ก่อน แต่ผมก็พยายามทำไปเรื่อยๆ เรียนรู้กับมัน เพราะผมรักการสร้างเว็บ *-*

max30012540 · 16 ตุลาคม 2013, 13:46:19

พิมพ์เสร็จ กำลังจะก๊อบโค้ด แต่ไม่ทันละ

ThugzAffiliate · 16 ตุลาคม 2013, 13:57:03

อ้างถึงจาก: narupot ใน 16 ตุลาคม 2013, 13:44:07

ที่จิงผมว่าจะทำแบบว่า เวลาเอาเมาส์ไปชี้ตรงเมนูสีดำๆ จะมีเมนูซับ พวกนี้โชวออกมาอ่ะครับ และก็ถัดมาให้เป็นช่องค้นหา และก็ส่วนของสมาชิก
แต่ฝีมือไม่ถึงเลยค่อยๆ งูๆ ปลาๆ พยายามทำ ผมดิ้นดนมาตั้งแต่ ม.2 จน ม.6 ยังทำไม่สำเร็จ ไม่ค่อยเข้าใจพวก java scrip ว่าจะเรียนสร้างเว็บออนไล์
แม่ก็ป่วย เลยต้องหาตังให้แม่ใช้ก่อน แต่ผมก็พยายามทำไปเรื่อยๆ เรียนรู้กับมัน เพราะผมรักการสร้างเว็บ *-*

เมนูซับ ลองดู ที่นี่ ครับ http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm น่าจะช่วยได้

narupot · 16 ตุลาคม 2013, 14:10:48

อ้างถึงจาก: max30012540 ใน 16 ตุลาคม 2013, 13:46:19
พิมพ์เสร็จ กำลังจะก๊อบโค้ด แต่ไม่ทันละ

ทันเสมอท่านผมดูทุกความคิดเห็น อิอิ ขอบคุณมากครับ ++

max30012540 · 16 ตุลาคม 2013, 14:39:07

เอาซัพเมนูไปแทนละกัน

โค้ด เลือก


<style>
.box-btn{
	display:inline-block;
}
.box-btn > div > ul{
	margin:0;
	width:21px;
	padding:3px 0;
}

.box-btn > div > ul > li{
	list-style:none;
	height:3px;
	border-radius:3px;
	background:#000;
	margin:3px;
}

.box-btn:hover > div > ul{
	background:#F2F2F2;
}

.box-btn > ul{
	display:none;
	margin:0;
	background:#CCC;
	padding:5px;
	position:absolute;
}

.box-btn > ul > li{
	list-style:none;
	width:120px;
}

.box-btn:hover > ul{
	display:block;
}
</style>
<header>
  <nav>
    <a class="box-btn">
      <div>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <ul>
        <li>ss</li>
        <li>ss</li>
      </ul>
    </a>
  </nav>
</header>

narupot · 16 ตุลาคม 2013, 14:46:07

อ้างถึงจาก: max30012540 ใน 16 ตุลาคม 2013, 14:39:07
เอาซัพเมนูไปแทนละกัน

โค้ด เลือก ขยาย
<style> .box-btn{ display:inline-block; } .box-btn > div > ul{ margin:0; width:21px; padding:3px 0; } .box-btn > div > ul > li{ list-style:none; height:3px; border-radius:3px; background:#000; margin:3px; } .box-btn:hover > div > ul{ background:#F2F2F2; } .box-btn > ul{ display:none; margin:0; background:#CCC; padding:5px; position:absolute; } .box-btn > ul > li{ list-style:none; width:120px; } .box-btn:hover > ul{ display:block; } </style> <header> <nav> <a class="box-btn"> <div> <ul> <li></li> <li></li> <li></li> </ul> </div> <ul> <li>ss</li> <li>ss</li> </ul> </a> </nav> </header>

ขอบคุณมากๆ ครับพี่ ++

BeerKingMan · 16 ตุลาคม 2013, 15:38:54

เทคนิคการเขียน css ง่ายๆเลยนะครับ ให้นึกถึงตอนจัดบอร์ดวันสุนทรภู่สมัยเรียน ม.ต้น ครับ ตามนั้น