css - 如何水平对齐一行中的 3 个跨度?

标签 css

我应该如何将yellowarea保持在redareagreenarea中间。

https://jsfiddle.net/ashish3506/4wopk1u3/1/

我的 HTML 代码

<body>
<span class="redarea"></span> 
<span class="yellowarea"></span> 
<span class="greenarea"></span>
</body>

我的 CSS 代码

.redarea{
width:300px;
height:300px;
background:red;
float:left;
}

.yellowarea{
width:300px;
height:300px;
background:yellow;
margin-left:400px;
}

.greenarea{
float:right;
width:300px;
height:300px;
background:green;
}

最佳答案

只需这样做

span {  
    width:300px;
    height:300px;
    display:inline-block;
}
.redarea{
    background:red;
}

.yellowarea{
    background:yellow;
}

.greenarea{
    background:green;
}

https://jsfiddle.net/theprog/4wopk1u3/7/

关于css - 如何水平对齐一行中的 3 个跨度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28723342/

相关文章:

css - 左边框在 Safari 中不起作用

javafx - 覆盖根 css 属性

html - 是否可以仅右对齐表头的一个组件?

html - 如何使图像位置相对于另一个图像是绝对的?

javascript - 表单验证 : un-hide submit button when a radio value is selected and text message is entered

javascript - 如何在多个 Canvas html5上绘制圆圈?

css - 速子 CSS : Responsive line of buttons

javascript - 如何在单击按钮 Angularjs 时获取表行值

javascript - 资源在加载默认站点时被错误解释

jquery - 如何改变 JQuery/CSS 元素的形状?