我在插入符和垂直菜单之间有对齐问题，请帮忙..我尝试了 float: , position .. 插入符不起作用。
插入符号应位于页面顶部。
如何将插入符号的背景更改为类似于移动应用程序的线条。
<style>
nav {
/* Repeating background image */
background: url(http://weebtutorials.com/wp-content/uploads/2012/11/a.png);
width:210px;
margin:20px;
}
nav ul {
/* Removes bullet points */
list-style:none;
margin:0;
padding:0;
}
nav ul li {
/* Any child positioned absolutely will be positioned relative to this */
position:relative;
}
nav a {
color:#e8e8e8;
padding:12px 0px;
/* Fill all available horizontal space */
display:block;
/* Remove underline */
text-decoration:none;
/*
New CSS3 animations:
apply transition to background property, taking 1s to change it
*/
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}
nav a:hover {
/*
RGBA background for t
background: RGBA(255,255,255,0.05);
color:#fff;
}
nav a:hover span {
background: #7d2c41;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
nav ul li:hover ul {
display:block;
}
nav ul ul {
position:absolute;
left:210px;
top:0;
border-top:1px solid #e9e9e9;
display:none;
}
nav ul ul li {
width:200px;
background:#f1f1f1;
border:1px solid #e9e9e9;
border-top:0;
}
nav ul ul li a {
color:#a8a8a8;
font-size:12px;
text-transform:none;
}
nav ul ul li a:hover {
color:#929292;
}
nav span {
width:12px;
height:12px;
background:#fff;
display:inline-block;
float:left;
margin-top:3px;
margin-right:20px;
position:relative;
transition:all 0.5s;
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
nav span:before {
content:"";
width:12px;
height:2px;
background:#3a3b3b;
position:absolute;
left:0px;
top:5px;
}
nav span:after {
content:"";
width:2px;
height:12px;
background:#3a3b3b;
position:absolute;
left:5px;
position:top;
}
.caret-right {
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #fff;
margin-right: 160px;
margin-top: 0px"
position: top;
float:right;
display: inline-block;
}
</style>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<nav>
<ul>
<li class="current"><a href="{% url 'home' %}"><span></span> Home </a></li>
<li> <a href="{% url 'backtesting' %}"><span></span>AI assisted backtesting </a>
</li>
<li> <a href="{% url 'beststock' %}"><span></span>Best stocks to trade today </a></li>
<li> <a href="{% url 'freedata' %}"><span></span>Get free data </a></li>
</ul>
</nav>
<div class="btn-group cust-dropdown pull-right">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="{% url 'aboutus' %}">About us</a></li>
<li><a href="{% url 'documentation' %}">Documentation</a>
</li>
<li><a href="{% url 'pricing' %}">Pricing</a></li>
<li><a href="{% url 'contactus' %}">Contact us</a></li>
<li><a href="{% url 'register' %}">Register</a></li>
</ul>
</div>
最佳答案
你在边距顶部分号和引号以及位置值上有语法错误
这是你的代码
.caret-right {
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #fff;
margin-right: 160px;
margin-top: 0px"
position: top;
float:right;
display: inline-block;
}
应该是
.caret-right {
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #fff;
margin-right: 160px;
margin-top: 0px;
position: absolute;
top: 0;
right: 0;
display: inline-block;
}
关于html - 对齐问题 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44017460/