在站点标题中的3个图标后显示文本

时间:2016-06-03 09:30:30

标签: html css

我们正在显示文字&#34; a&#34;在网站左上角使用<p class="a123">a</p>

但我想移动文字&#34; a&#34;在3个图标旁边的右上角。

enter image description here

我们正在使用以下代码

<div id="header">

<header id="header" class="page-header">

<div class="page-header-container">
           <!-- logo -->
        <a class="logo" href="<?php echo $this->getUrl('') ?>">
            <img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="large" />
            <img src="<?php echo $this->getLogoSrcSmall() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="small" />
        </a>

           <!-- logo end-->

<!-- search bar image -->

<div id='hideshow'>
<img src="<?php echo $this->getSkinUrl('images/search_16.png');?>" alt="Search">        
</div>

<!-- search bar image -->

<?php // In order for the language switcher to display next to logo on smaller viewports, it will be moved here.
              // See app.js for details ?>
<div class="store-language-container"></div>

<div class="skip-links">

<div class="account-cart-wrapper">

<!-- account man image -->
<a href="<?php echo $this->helper('customer')->getAccountUrl(); ?>" data-target-element="#header-account" class="skip-link skip-account">
                    <span class="icon"></span>                   
</a>

<!-- account man image end -->

<!-- Cart icon start-->

<div class="header-minicart">
<?php echo $this->getChildHtml('minicart_head'); ?>

</div>       
<!-- Cart icon end-->     
</div>


<?php 

// echo $this->getLayout()->createBlock('page/switch')->setTemplate('page/switch/languages.phtml')->tohtml(); 

?>  

<p class="a123">a</p>

</div>
        <!-- Menu -->

        <div id="header-nav" class="skip-content">
            <?php echo $this->getChildHtml('topMenu') ?>
        </div>

        <!-- Menu end-->

        <!-- Search -->

        <div id="header-search" class="skip-content desktop-only">
            <?php echo $this->getChildHtml('topSearch') ?>
        </div>

        <!-- Search end -->

        <!-- Account -->

        <div id="header-account" class="skip-content">
            <?php echo $this->getChildHtml('topLinks') ?>
        </div>
        <!-- Account end-->     

</div>

    <!--<div id="header-search" class="desktop-only">
            <?php echo $this->getChildHtml('topSearch') ?>
        </div>-->
</header>

<?php 

// echo $this->getChildHtml('topContainer'); 
?>
</div>

请帮我找到解决方案

提前致谢

2 个答案:

答案 0 :(得分:1)

example of the code i added to your site

.a123{
   position: absolute;
   top: 25px;
   right: 0;
}

将此项添加到您的css文件中会将其置于页面的右上角,然后您可以根据需要更改top属性以将其放置在图标旁边。

答案 1 :(得分:1)

.a123 {
    position: absolute;
    right: 0px;
    top: 10px;
    z-index: 999;
    font-size: 30px;
}  

我希望这会对你有所帮助。 Screenshot