html - 我正在制作一个有趣的项目,一个电影网站(实际上不会使用它,只是测试我的基本知识和互联网能走多远)
问题描述
所以我在css上遇到了一点问题,我做了一个div,在那个div里面是一个链接,它占据了整行,甚至认为它没有整行那么大,每当我尝试添加一些东西时,它就会推动它放入下一行,而不是将链接放在彼此相邻的同一行上。我怎么可能让它粘在同一行(已经尝试过显示:内联;和显示:内联块;)这是代码......我知道它是一团糟我是新手:D。
这是我第一页的代码:
<html>
<head>
<title>VASMOVIES</title>
<link rel="stylesheet" href="css/vas.css"/>
<script defer src="http://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<header>
<div class="div1">
<h1 title="Home"><a href="home.html"> VASMOVIES </a></h1>
</div>
</header>
<br><br><br><br><br><br><br>
<h1 class="center"> VASMOVIES </h1>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Search for movies">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<footer>
<button class="button" onclick="darkmode()">Dark/Light mode</button>
<button class="button"><a href="emailpage.html">Contact me</button>
<script>
function darkmode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</footer>
</body>
</html>
这是CSS:
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
transition: 1s;
padding: 25px;
background-color: #121212;
color: white;
font-size: 25px;
margin: 0;
padding: 0;
}
.button {
background-color: black;
border: none;
border-radius: 50px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover {
transition-duration: 0.5s;
background-color: #333;
}
.dark-mode {
transition: 1s;
background-color: #CAF4F4;
color: black;
}
.center {
color: purple;
text-align: center;
}
.div1 {
width: 70%;
background-color: #333;
border: 2px solid gray;
border-radius: 5px;
margin: auto;
left: 50%;
}
.div2 {
width: 50%;
background-color: #333;
border: 2px solid gray;
border-radius: 5px;
margin: auto;
left: 50%;
color: darkgray;
font-family: Georgia, serif;
line-height: 0.1;
text-align: center;
}
a {
text-decoration: none;
color: purple;
display: inline-block;
}
a:active {
color: purple;
}
footer {
background-color: #333;
text-align: center;
color: #fff;
padding: 20px;
bottom: 0;
width: 100%;
position: fixed;
left: 0px;
}
.search-box {
position: absolute;
top: 50%;
left: 35%;
transfor: translate(-50%, -50%);
background: #333;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt {
}
.search-btn {
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: #808080;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 500px;
}
解决方案
你是这个意思吗?
<div class="div1">
<h1 title="Home"><a href="home.html"> VASMOVIES </a></h1>
</div>
如果是这样,当你说你添加一些东西时你是什么意思?
推荐阅读
- python - 删除熊猫数据框索引中的字符范围
- python - 将 csv 文件读入 pandas 数据帧的正确方法是什么?
- javascript - Javascript - 对对象进行分组和排序
- javascript - 如何使地图居中?
- jquery - Jquery Timepicker 禁用时间范围
- excel - 在另一个 Sub 中调用多个变量
- javascript - 如何在同一位置刷新 div 避免重复行
- django - 如何在 generic.DetailView 中获取 pk?
- tensorflow - 如何修复“ImportError:DLL 加载失败:找不到指定的过程。” 在导入 tensorflow-gpu 时?
- javascript - 如何有效地从浏览器中的大 zip 中提取特定的 json?