problem description
at present, I am imitating Xiaomi"s official website and use floating at the top. I have tried many ways not to float the shopping cart to the far right. Ask for advice
the environmental background of the problems and what methods you have tried
write the float of the shopping cart first or later, it has no effect
related codes
/ / Please paste the code text below (do not replace the code with pictures)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> - MIX 3 8 6 Pro </title>
<link rel="shortcut icon" href="https://www.mi.com/favicon.ico">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- -->
<div class="topbar">
<!-- -->
<div class="container">
<!-- -->
<div class="topbar-nav">
<a href="-sharp"></a>
<a href="-sharp">MIUI</a>
<a href="-sharp">IoT</a>
<a href="-sharp"></a>
<a href="-sharp"></a>
<a href="-sharp"></a>
<a href="-sharp"></a>
<a href="-sharp"></a>
<a href="-sharp"> app</a>
<a href="-sharp">Select Region</a>
</div>
<!-- Over-->
<!-- -->
<div class="topbar-info">
<a href="-sharp"></a>
<a href="-sharp"></a>
<a href="-sharp"></a>
</div>
<!-- Over-->
<!-- -->
<div class="topbar-cart">
<a href="-sharp">0)</a>
</div>
<!-- Over-->
</div>
<!-- Over -->
</div>
<!-- Over-->
</body>
</html>CSS
* {
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.topbar{
/* background: -sharp333333; */
height: 40px;
}
.container{
width: 1226px;
/* */
margin: 0 auto;
}
.container::before,.container::after{
content: "";
display: table;
}
.container::after{
clear: both;
}
.topbar-nav{
float: left;
}
.topbar-info,.topbar-cart{
float:right;
}what result do you expect? What is the error message actually seen?
you can float the shopping cart to the far right, the way to solve the problem, thank you!
