Question

在下面的代码中，如何让class =“author”中的文本右对齐class =“label”中的文本？在下面的示例中，“作者姓名”中的“e”应右对齐“回答者：”中的“：”。谢谢。

<html>
<head>
   <style type="text/css">
        .action {
            display: inline;
        }

        .add-box {
            margin-left: 40px;
            display: inline;

        }
        .share-button {
            margin-left: 30px;
            display: inline;
        }
        .flag {
            margin-left: 30px;
            display: inline;
        }
        .author-area {
            margin-left: 30px;
            display: inline;
        }
        .label {
            margin: 0;
            display: inline;
        }
        .author {
            margin: 0;
        }
        .gray-button {
        background: #C0C0C0;
        font-size: 14px;
        margin:0;
        padding: 10px;
        border: 1px solid #C0C0C0;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        cursor: pointer;
        }
   </style>
</head>

<body>
    <div class="action">
        <div class="add-box">
            <a href="#" class="gray-button">Plan</a>
        </div>
        <div class="share-button">
            <a> Share </a>
        </div>
        <div class="flag">
            <a>flag</a>
        </div>
        <div class="author-area">
            <p class="label">Answered by:</p>
            <p class="author"><a href="#"></a>Author name </p>
        </div>
    </div>

</body>

Answer 1

您可以在'.author-area'上使用'inline-block'：

.author-area {
  margin-left: 30px;
  display: inline-block;    
  vertical-align: top;
}

'vertical-align'选项可以阻止div伸出其他人。

Answer 2

Theres有两种选择。但您可以尝试将元素浮动到左侧并将text-align:right设置为author-area DIV。

<style type="text/css">
    .action {
        display: inline;
        float: left;
    }
    .add-box {
        margin-left: 40px;
        display: inline;
        float: left;
    }
    .share-button {
        margin-left: 30px;
        display: inline;
        float: left;
    }
    .flag {
        margin-left: 30px;
        display: inline;
        float: left;
    }
    .author-area {
        margin-left: 30px;
        display: inline;
        float: left;
        text-align: right;
    }
    .label {
        margin: 0;
        display: inline;
    }
    .author {
        margin: 0;
    }
    .gray-button {
    background: #C0C0C0;
    font-size: 14px;
    margin:0;
    padding: 10px;
    border: 1px solid #C0C0C0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    cursor: pointer;
    }
</style>

Answer 3

我总是喜欢使用CSS网格系统，例如

http://www.1kbgrid.com/

用我的div定位等......让你轻松做上面提到的事情

CSS：你如何排列4个div，但最后一个跨越2行？

3 个答案: