html – CSS – 左和右对齐在同一行

前端之家收集整理的这篇文章主要介绍了html – CSS – 左和右对齐在同一行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
以下是一些示例代码,其中所有的链接都是正确的.我想改变CSS,所以“左”链接是左对齐的,其他的是正确的,但它们都在同一行.我怎么做?

提前致谢,

约翰

HTML

<div class="mainlinks">
    <a href="left.PHP" class="links">Left</a>
    <a href="right1.PHP" class="links">Right1</a>
    <a href="right2.PHP" class="links">Right2</a>
</div>

CSS:

.mainlinks
    {
    text-align:right;
    margin-top:3px;
    margin-right:10px;
    margin-bottom:0px;
    padding:0px;
    }

 a.links:link {
    color: #FF0000; text-decoration: none;
    text-align:center;
    margin-left:8px;
    margin-top:300px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial,Helvetica,sans-serif;
    font-size: 14px;
    }

解决方法

向左浮动
.left {float:left;}

    <div class="mainlinks">
        <a href="left.PHP" class="links left">Left</a>
        <a href="right1.PHP" class="links">Right1</a>
        <a href="right2.PHP" class="links">Right2</a>
    </div>

但是您需要从a.links:link中删除margin-top:300px,否则左边的距离将低于300px.

猜你在找的HTML相关文章