Tạo các nút bấm trong HTML

#1

Chào mn, mình có 1 bài tập và mình đã làm xong phần hình phía trên, còn các nút submit thì dùng thẻ ul hay là dùng thẻ div để bao bọc ạ, mong mn giúp đỡ ý tưởng ạ, mình cảm ơn.

image
image.jpg1366×768 209 KB

#2

Mình khuyên là dùng <div> để sau có thể responsive dễ dàng hơn :wink:

1 Like
#3

Chào ạ, cho mình hỏi sao 2 thẻ div trên và dưới nó có 1 khoảng cách vậy ạ
html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
	<link rel="stylesheet" href="styles/lab7_bai4.css">
</head>

<body>
	<div id="noidung">
		<div id="hinh">
	 	   	<img src="images/layout/banner.png" alt="">
		</div>
   		<div id="thaotac">
	  	 	<input type="submit" value="Hình trước" id="sm1">
	   		<input type="submit" value="Hình 1" id="sm2">
	   		<input type="submit" value="Hình 2" id="sm3">
	   		<input type="submit" value="Hình 3" id="sm4">
	  		<input type="submit" value="Hình sau" id="sm5">
  		</div>
	</div>
</body>
</html>

css

@charset "utf-8";
/* CSS Document */

*{
	margin: 0 ;
}
#noidung
{
	width: 602px;
}
#hinh img
{
	border: 1px solid gray;
}
#thaotac
{
	text-align: center;
	border: 1px solid gray;
}
#thaotac input
{
	margin: 10px 20px;
}

image
image.png1366×768 58 KB

#4

Thêm margin-top cho thẻ <div> thứ 2 thôi bạn.

1 Like
#5

Bạn thử thêm một số thuộc tính của css như
float: left
overflow: auto
display: table

#6

Chào ạ, khi mình thêm margin-top:0px; cho thẻ <div> thứ 2 thì vẫn bình thường, nhưng khi mình chỉnh thành margin-top:-5px; thì nó lại đúng.

#7

Thử tham khảo xem, mình nghe nói là không nên dùng float để dàn layout nữa nên bây giờ mới học flexbox với grid.

Exercise

2 Likes
#8

Add border cho cái div thôi, không nên add border cho cái hình.

#hinh{
	border: 1px solid gray;
}
#9

Bạn để nó = 0px thì nó sẽ giữ nguyên mà :smile: Còn việc để = -5px mà nó đúng với ý bạn là div thứ 2 bị kéo lên á @@
Bạn có thể xem ví dụ về margin ở đây:

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?