Question

我正在使用Wordpress和他们的第二十三个主题。有了这个主题，我想将网站标题和标语文本定位并对齐到标题的右上角。当我尝试这样做时，由于某种原因，它总是位于我的徽标下面。我玩了位置CSS属性没有运气，它仍然位于徽标下面。

CSS文件样本

.site-title {
    font-size: 30px;
    line-height: 0.5;
    padding: 5px 0 10px;
    text-align:right;
    position: relative;
}

.site-description {
    font: 300 italic 18px "Source Sans Pro", Helvetica, sans-serif;
    text-align:right;
}

.site-header {
    margin:10px auto 0 auto;
    max-width:980px;
    padding:0;
    background-color:#ffffff;
    background-size: 980px auto;
    border-top:2px solid #efefef;
    border-bottom:1px solid #cdcdcd;
    box-shadow: 0 3px 3px #dedede;
    -moz-box-shadow: 0 3px 3px #dedede;
    -webkit-box-shadow: 0 3px 3px #dedede;
    -o-box-shadow: 0 3px 3px #dedede;
}

.site-header .site-title:hover {
    text-decoration: none;
}

.site-header .home-link {
    min-height: 50px;
}

.header-logo {
    max-width:60%;
    display:block;
    padding-top:3px;
    position:relative;
}

这是我的测试网站，所以你可以看到我正在谈论的内容： mywptestsite.is-great.org

我在这里缺少什么？提前致谢，金

Answer 1

您可以尝试这一点 - 将这几行添加到标题和标语css类中：

.site-title {
    position:absolute;
    top:20px;
    right:20px;

        }
.site-description {
position:absolute;
top:50px;
right:110px;
}

您可以更改顶部和右侧值以获得所需的位置......

Answer 2

您可以在图片，标题和说明上使用float将这两个元素放在右侧。您还需要在.home-link上使用clearfix technique来使元素包围所有浮动元素。

<强> CSS

.header-logo { float: left; }
.site-title{ float: right; clear: none; }
.site-description { clear: right; }

Answer 3

问题在于您将网站标题封装在h1标记中，因此将其定位在新行中。

您可以通过将徽标和网站标题放在同一个<div>元素中来解决问题，并将float: left;添加到标题徽标类，并将float: right;添加到您的网站-title class。

如何在标题的右上角定位网站标题和标语？

3 个答案: