【发布时间】：2020-01-17 16:51:04
【问题描述】：
我是 html 和 css 的新手。我试图将按钮“dropbtn”移动到我网页的右侧，但它仍然在左侧。我尝试过使用 float、align、right、text-align 但它们似乎都不起作用。我也尝试过使用标签 !important 但这也无济于事。
.mystyle{
height: 90px;
width: 254px;
color: white;
font-size: smaller;
}
.flip-container{
perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper{
transform: rotateY(180deg);
}
.flip-container,
.front
.back{
height: 200px;
width: 260px;
}
.flipper{
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front{
text-align: center;
color: black !important;
z-index: 2;
transform: rotateY(0deg);
}
.back{
transform: rotateY(180deg);
}
footer{
background: #aaa;
color: white;
}
.edit{
float: right;
padding-right: 10px;
}
nav{
height: 6cm;
background-image: url("bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
position: absolute;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}<!DOCTYPE html>
<html lang="en">
<head>
<title>webpage title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/restaurants.js"></script>
</head>
<body onload="getRestaurantData()">
<!-- This is where top navigation html codes is -->
<div w3-include-html="top-navigation.html"></div>
<!-- This is the container that holds the initial message, heading, and movies -->
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="container">
<!-- The message will be shown when the page loads and will
disappear after the movies are loaded -->
<div class="row" id="parent">
Retrieving movies from database... Please wait...<br><br>
If you are seeing this message for a long time, it is likely
that you have a JavaScript error. Troubleshoot your script by
using the browser console panel now. Please use either Firefox
or Chrome to render this webpage.
</div>
<p>
<!-- This is the heading showing how many movies are there -->
<h3 id="summary"></h3>
</p>
<!-- Displays thumbnails of the movies here -->
<div id="restaurantsTable" class="row"></div>
</div>
<br><br>
<!-- Include footer here -->
<div w3-include-html="footer.html"></div>
</body>
<script src="js/w3.js"></script>
<script>
//to bring in other HTML on the fly into this page
w3.includeHTML();
</script>
</html>【问题讨论】：