CSS两个<span>标签两端对齐（向左向右对齐）-CFANZ编程社区

CSS两个<span>标签两端对齐（向左向右对齐）

方案一：使用float

居左：float:left

居右：float:right

实例：

<style>
#test{ width:400px; overflow:hidden}
.left{ float:left; width:180px; border:1px solid #F00}
.right{ float:right; width:200px; border:1px solid #00F}
</style>
</head>
<body>
<div id="test">
<span class="left">应用span居左</span>
<span class="right">使用span居右</span>
</div>
</body>

方案2：行内与块之间转换

.box {
    width: 100%;
    /* 由于 content 会另起一行，影响样式的话，height 设置为具体的值能够避免高度变高的状况 */
    height: 100%;
    /* 设置元素两端对齐 */
    text-align: justify;
}

/* 这里的伪元素必定要加上，否则span元素不能两端对齐 */            
.box:after {
    content: "";
    display: inline-block;
    overflow: hidden;
    width: 100%;
}       
.box span {
    width: 50px;
    height: 50px;
    /* 设置盒子为行内块 */
    display: inline-block;
    background-color: skyblue;
    /* 设置盒子内元素水平居中 */
    text-align: center;
    /* 设置盒子内容垂直居中 */
    line-height: 50px;
}

<div class="box">
    <span>1</span>
    <span>5</span>
</div>

参考地址：

http://www.javashuo.com/article/p-fcadrspj-ne.html

0 条评论