CSS 元素不会正确对齐
css elements won't align right
我有这个CSS:
#top-nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
text-align:right;
background: #eeeeee;
border-bottom: 1px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width:100%;
}
#top-nav li {
float: left;
}
#top-nav #customer-login, #top-nav #reseller-login {
border-right: 1px solid #666666;
-moz-box-shadow: 1px 0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
}
#top-nav #reseller-login {
border-right: 1px solid #666666;
-moz-box-shadow: 1px 0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
}
#top-nav #customer-login-trigger, #top-nav #reseller-login-trigger {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
color: #666666;
text-shadow: 0 1px 0 #fff;
}
#top-nav #customer-login-trigger, #top-nav #reseller-login-trigger {
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#top-nav #customer-login-trigger:hover, #top-nav #reseller-login-trigger:hover,
#top-nav #login .active {
background: #fff;
}
#top-nav #customer-login-content, #top-nav #reseller-login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
text-align:left;
z-index: 999;
background: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-moz-border-radius: 3px 0 3px 3px;
-webkit-border-radius: 3px 0 3px 3px;
border-radius: 3px 0 3px 3px;
}
#top-nav li #customer-login-content, #top-nav li #reseller-login-content {
right: 0;
width: 250px;
}
/*--------------------*/
#inputs input {
background: #f1f1f1;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 238px;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px #ccc inset;
-webkit-box-shadow: 0 1px 1px #ccc inset;
box-shadow: 0 1px 1px #ccc inset;
}
#inputs input:focus {
background-color: #fff;
border-color: #e8c291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #e8c291 inset;
box-shadow: 0 0 0 1px #e8c291 inset;
}
/*--------------------*/
#login #actions {
margin: 10px 0 0 0;
}
#login #submit {
background-color: #d14545;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
background-image: -webkit-linear-gradient(top, #e97171, #d14545);
background-image: -moz-linear-gradient(top, #e97171, #d14545);
background-image: -ms-linear-gradient(top, #e97171, #d14545);
background-image: -o-linear-gradient(top, #e97171, #d14545);
background-image: linear-gradient(top, #e97171, #d14545);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #fff;
}
#login #submit:hover,
#login #submit:focus {
background-color: #e97171;
background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
background-image: -webkit-linear-gradient(top, #d14545, #e97171);
background-image: -moz-linear-gradient(top, #d14545, #e97171);
background-image: -ms-linear-gradient(top, #d14545, #e97171);
background-image: -o-linear-gradient(top, #d14545, #e97171);
background-image: linear-gradient(top, #d14545, #e97171);
}
#login #submit:active {
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#login #submit::-moz-focus-inner {
border: none;
}
#login label {
float: right;
line-height: 30px;
}
#login label input {
position: relative;
top: 2px;
right: 2px;
}
但是我无法使链接正确对齐
这是完整代码的小提琴:
http://jsfiddle.net/F7Kdy/
编辑:这有效,但颠倒了li
的顺序。 使用杰伊哈里斯的答案。
您只需要将li
设置为float:right
,如下所示:
#top-nav li {
float: right;
}
即使它们的父ul
设置为 float: right
,它们也需要这样设置。
删除 float
属性,因为您正在按父级对齐它。并确保元素与display: inline-block
.
注意:如果添加float: right;
,您将更改所列元素的顺序。 从而使一切都倒退。
#top-nav li {
display: inline-block;
}
吉斯菲德尔
#top-nav li {
float: right;
}
更新的小提琴
相关文章:
- html根据DIRECTION设置更改元素的水平对齐
- 如何将剑道UI窗口与页面上的另一个元素对齐
- 将可拖动元素与从父项位置开始的网格对齐
- 增强说唱修复全宽元素,内容对齐
- jquery可丢弃元素与网格对齐
- 将元素与窗口底部对齐,但允许滚动到下面的内容
- 类似文本锚的属性,用于对齐 SVG 或 G 元素
- 恒星.js - 为垂直滚动网站配置偏移/对齐元素
- CSS 元素不会正确对齐
- 如何使用 JQuery 移动更改移动方向时使网格元素水平对齐到垂直对齐
- 根据 c3 条形图中的坐标对齐外部元素
- 元素忽略位置:修复了在 CSS 中对齐的问题
- 文本对齐:居中和边距:0自动不适用于绝对定位的元素
- 垂直对齐和具有动态内容和高度的元素
- 在对齐作为 css 圆圈的导航列表元素的基线时遇到问题
- 在页面上对齐这些元素的最佳方法是什么
- PHP:如何使用simple_html_dom解析器将CSS文本对齐属性添加到元素的现有内联样式属性中
- 与固定元素和可滚动内容对齐
- 如何对齐
元素基于另一个 上面的元素 - 在HTML CSS中对齐元素的边缘