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

Posted 2023-03-06

【中文标题】如何将网站标题和标语定位在标题的右上角？

【英文标题】：How to position the site title and tagline on the upper right of the header?

【发布时间】：2014-02-06 01:59:06

【问题描述】：

我正在使用 Wordpress 和他们的第 23 个主题。有了这个主题，我想将网站标题和标语文本定位并对齐到标题的右上角。当我尝试这样做时，出于某种原因，它总是位于我的徽标下方。我玩了位置 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

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

【问题讨论】：

请提供SSCCE（有效且语法正确的代码），以便我们重现您的问题。

如果您发现解决方案正是您想要的，请务必将答案标记为正确

【参考方案1】：

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

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

【参考方案2】：

你可以试试这个 - 将这几行添加到标题和标语 css 类：

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

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

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

【参考方案3】：

您可以在图片、标题和描述上使用float，将这两个元素放在右侧。您还需要在.home-link 上使用clearfix technique 以使元素环绕所有浮动元素。

CSS

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