html - 我如何将我的绿色按钮放在我的红色按钮旁边而不是在我的红色按钮下
问题描述
我需要更改我的绿色按钮在屏幕上的位置。当我创建按钮时,它会自动位于我的另一个红色按钮下方,我希望这些按钮彼此相邻。我没有尝试过任何东西,因为我是一个没有经验的程序员,我想不出任何可以尝试的东西。我为糟糕的措辞道歉,因为我的英语不是很好。帮助将不胜感激。
body {
padding: 50px;
}
.netflix {
color: white;
transition: transform 0.5s;
cursor: pointer;
height: 210px;
width: 400px;
border-style: none;
outline-style: none;
position:relative;
background: red;
/*background-image: url(netflix\ black\ logo.png);
background-size: cover;*/
border-radius: 3px;
}
.netflix:hover {
transform:scale(1.03,1.03);
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.hulu {
transition: transform 0.5s;
cursor: pointer;
height: 210px;
width: 400px;
background-image: url(hulu.jpg);
background-size: cover;
border-style: none;
outline-style: none;
background: lightgreen;
}
.hulu:hover {
transform:scale(1.03,1.03);
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*div {
width: 310px;
height: 169px;
background-image: url(netflix\ black\ logo.png);
background-size: cover;
position: absolute;
top: 4;
/*margin-right: 2px;*/
/*margin-left: 5px;*/
/*align-self: center;
}*/
/*p {
margin-top: 40px;
margin-left: 2px;
margin-right: 2px;
text-align: left;
margin-top: 176px;
color: black;
font-size: 22px;
font-family: Arial, Helvetica, sans-serif;
}*/
<html>
<head>
<title>entertainment</title>
<link rel="stylesheet" href="shop.css">
</head>
<body>
<form action="https://netflix.com/" target="_blank">
<button class="netflix">
<!--div>
</div>
<p>visit netflix and stuff </p-->
</button>
</form>
<form>
<button class="hulu">
</button>
</form>
</body>
</html>
解决方案
只需使用Flexbox布局来对齐您的元素:
body {
padding: 50px;
display: flex; /* <- It will make children align in the same row */
}
.netflix {
color: white;
transition: transform 0.5s;
cursor: pointer;
height: 210px;
width: 400px;
border-style: none;
outline-style: none;
position:relative;
background: red;
/*background-image: url(netflix\ black\ logo.png);
background-size: cover;*/
border-radius: 3px;
}
.netflix:hover {
transform:scale(1.03,1.03);
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.hulu {
transition: transform 0.5s;
cursor: pointer;
height: 210px;
width: 400px;
background-image: url(hulu.jpg);
background-size: cover;
border-style: none;
outline-style: none;
background: lightgreen;
}
.hulu:hover {
transform:scale(1.03,1.03);
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<html>
<head>
<title>entertainment</title>
<link rel="stylesheet" href="shop.css">
</head>
<body>
<form action="https://netflix.com/" target="_blank">
<button class="netflix">
<!--div>
</div>
<p>visit netflix and stuff </p-->
</button>
</form>
<form>
<button class="hulu">
</button>
</form>
</body>
</html>
推荐阅读
- jquery - 如何使用epplus通过ajax调用返回excel文件
- angular - 如何使用角度模型从 API 获取数据
- sql - 有没有办法在具有聚合函数的表上仅显示每个国家/地区的类别的最高值
- list - 如何将列表合并到 Elixir 中的元组列表中?
- c++ - 如何检测鼠标是否被按下,而不仅仅是点击
- java - 在运行时检测 Project Loom 技术是否缺失或存在 JVM
- git - 如何直接从 git bash 命令行创建 azure 存储库?(无需进入浏览器)
- flutter - Flutter:未定义命名参数“已启用”的 AlertDialog 和 TextButton
- python - 用于 Web 播放的 OpenCV2 Fourcc 编解码器
- arrays - 使用 for 循环设置按钮的标题