如何将 Div 个元素向左移动一点
How To Move Div Elements A Little To The Left
我想将#wctopdropcont 元素稍微向左移动。我曾尝试为边距和填充应用值,但它根本不起作用。理想情况下,我希望文本在左侧 20px。我博客的URL如下:http://www.blankesque.com及以下我已经包含了整个悬停导航栏的html和css编码。
#wctopdropcont{ /* width of the main bar categories */
width:100%;
height:45px;
display:block;
padding: 5.5px 0 0 0;
z-index:100;
top:0px;
left: 0px;
position:fixed;
background:#f8f8f8;
}
#wctopdropnav{ /* social */
float: right;
width:97%;
height:7px;
display:block;
padding:0px;
}
#wctopdropnav ul{
float:right;
margin:0;
padding:0;
}
#wctopdropnav li{
float:left;
list-style:none;
line-height:13px;
margin-left: 4px;
padding: 10px 6.5px 6.5px 6.5px;/* height of the clicked bar */
background:#f8f8f8;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#000000;
float: right;
display:block;
margin-left: 4px;
text-transform: uppercase;
font-size: 9.5px!important;
font-family: karla, arial!important;
padding: 5px;
text-decoration:none;
font-weight: normal!important;
letter-spacing : 0.09em;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a {
color:black;
font-weight: normal;
padding: 5px;
background: #f8f8f8; /* Old browsers */
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
filter:black;
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 9.5px;
background:#f8f8f8;
color: #000000;
width: 90px;
margin: 0px;
padding: 0;
line-height: 15px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: black;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
filter: #f8f8f8;
}
#wctopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:22px 0 0 0;
padding: 8px 0 0 0;
}
#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
left:auto
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
</style>
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<ul>
<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li>
<li><a href='#'>Categories</a>
<ul>
<li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
<li><a href='http://www.blankesque.com/search/label/Blogging'>Blogging</a></li>
<li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
<li><a href='http://www.blankesque.com/search/label/Fragrance'>Fragrance</a></li>
<li><a href='http://www.blankesque.com/search/label/Haul'>Haul</a></li>
<li><a href='http://www.blankesque.com/search/label/Lifestyle'>Lifestyle</a></li>
<li><a href='http://www.blankesque.com/search/label/Skin & Hair'>Skin & Hair</a></li>
</ul>
</li>
<li><a href='http://www.blankesque.com/p/contact-blankesque-for-press.html'>Contact</a></li>
<li><a href='http://www.blankesque.com/p/discalimer-policy_13.html'>Policies</a></li>
</ul>
</div></div>
#wctopdropnav ul {
...
margin-right: 20px;
}
在你的 #wctopdropnav ul
选择器中,你有 margin: 0
所以如果你想覆盖它并添加 margin-right: 20px;
那么它必须像这样在它之后声明。
#wctopdropnav ul {
float: right;
margin: 0;
margin-right: 20px;
}
通过将右边距应用到 #wctopdropnav
,我能够将导航文本向左移动。
#wctopdropnav {
float: right;
width: 97%;
height: 7px;
display: block;
padding: 0px;
margin-right: 20px;
}
我想将#wctopdropcont 元素稍微向左移动。我曾尝试为边距和填充应用值,但它根本不起作用。理想情况下,我希望文本在左侧 20px。我博客的URL如下:http://www.blankesque.com及以下我已经包含了整个悬停导航栏的html和css编码。
#wctopdropcont{ /* width of the main bar categories */
width:100%;
height:45px;
display:block;
padding: 5.5px 0 0 0;
z-index:100;
top:0px;
left: 0px;
position:fixed;
background:#f8f8f8;
}
#wctopdropnav{ /* social */
float: right;
width:97%;
height:7px;
display:block;
padding:0px;
}
#wctopdropnav ul{
float:right;
margin:0;
padding:0;
}
#wctopdropnav li{
float:left;
list-style:none;
line-height:13px;
margin-left: 4px;
padding: 10px 6.5px 6.5px 6.5px;/* height of the clicked bar */
background:#f8f8f8;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#000000;
float: right;
display:block;
margin-left: 4px;
text-transform: uppercase;
font-size: 9.5px!important;
font-family: karla, arial!important;
padding: 5px;
text-decoration:none;
font-weight: normal!important;
letter-spacing : 0.09em;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a {
color:black;
font-weight: normal;
padding: 5px;
background: #f8f8f8; /* Old browsers */
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
filter:black;
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 9.5px;
background:#f8f8f8;
color: #000000;
width: 90px;
margin: 0px;
padding: 0;
line-height: 15px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: black;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
background: #f8f8f8;
filter: #f8f8f8;
}
#wctopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:22px 0 0 0;
padding: 8px 0 0 0;
}
#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
left:auto
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
</style>
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<ul>
<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li>
<li><a href='#'>Categories</a>
<ul>
<li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
<li><a href='http://www.blankesque.com/search/label/Blogging'>Blogging</a></li>
<li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
<li><a href='http://www.blankesque.com/search/label/Fragrance'>Fragrance</a></li>
<li><a href='http://www.blankesque.com/search/label/Haul'>Haul</a></li>
<li><a href='http://www.blankesque.com/search/label/Lifestyle'>Lifestyle</a></li>
<li><a href='http://www.blankesque.com/search/label/Skin & Hair'>Skin & Hair</a></li>
</ul>
</li>
<li><a href='http://www.blankesque.com/p/contact-blankesque-for-press.html'>Contact</a></li>
<li><a href='http://www.blankesque.com/p/discalimer-policy_13.html'>Policies</a></li>
</ul>
</div></div>
#wctopdropnav ul {
...
margin-right: 20px;
}
在你的 #wctopdropnav ul
选择器中,你有 margin: 0
所以如果你想覆盖它并添加 margin-right: 20px;
那么它必须像这样在它之后声明。
#wctopdropnav ul {
float: right;
margin: 0;
margin-right: 20px;
}
通过将右边距应用到 #wctopdropnav
,我能够将导航文本向左移动。
#wctopdropnav {
float: right;
width: 97%;
height: 7px;
display: block;
padding: 0px;
margin-right: 20px;
}