时间戳

首页 > 解决方案 > 为什么我的社交媒体图标会离开屏幕？

html - 为什么我的社交媒体图标会离开屏幕？

问题描述

我正在尝试将我的社交媒体图标放在标题栏的右上角。但是，当我尝试“浮动：对；” 他们，他们似乎离屏幕太远了。当我尝试用“位置：绝对；”来纠正这个问题时，什么也没有发生。

您可以在下面看到问题。

在我漂浮之前：对；他们： 在此处输入图像描述

在我漂浮之后：对；他们： 在此处输入图像描述

如果有人想去检查页面，我的网站是invictus-together.com 。

下面是我到目前为止的CSS：

header {
    margin-top: 10px;
}

#masthead {
    background-color:black;
}

/*social media*/
.site-branding::after {
    content:"";
    clear:both;
    display:block;
}

.site-branding .widget {
    margin-bottom:0;
}

#sfsi-widget-2 {
    float:right;
    top:0;
    position:absolute; 
    right:0;
}

.norm_row_sfsi_wDiv_shuffle {
    position: relative !important;
}

/*logo*/
.site-logo {
    margin-top: 20px;
    margin-left: 20px;

}

.site-logo a img {
    margin:0;
}

/* Main Navigation */


.main-navigation {
  clear: both;
  display: block;
  float: none;
  text-align: center;
}

.main-navigation li {
  display: inline-block;
  float: none;
}

.main-navigation a {
  display: block;
  font-size: 22px;
  font-weight: 700;
  padding: 0 20px;
  text-decoration: none;
  text-transform: uppercase;
  color:white;
}

编辑：这是HTML：

<body <?php body_class(); ?>>
<div id="page">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'invictus' ); ?></a>

    <header id="masthead" class="site-header" role="banner">
    <div class="container">
        <div class="site-branding">
            <?php dynamic_sidebar('header'); ?>
        </div><!-- .site branding -->

        <div class="site-logo">
            <a href="invictus-together.com"><img src="<?php echo get_template_directory_uri(); ?>/invictus-together-logo-white.png"/></a>
        </div><!-- .site logo -->

        <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'invictus' ); ?></button>
            <?php wp_nav_menu( array('theme_location' => 'menu-1', 'menu_id' => 'primary-menu') ); ?>
        </nav><!-- #site-navigation -->

        <div class="login-section">
        </div><!-- .login-section -->
    </div><!-- .container -->
    </header><!-- #masthead -->
</div>

标签： htmlcss

解决方案

使用 position: absolute 时，您需要在父元素上加上 position: relative 。

因此，如果您是社交媒体图标元素在里面：

<div class="top-header">
   <div class="top-header-social">
   ...your icons...
   </div>
</div>

你的“顶级”类应该有：

.top-header{

    position:relative;
    width: 100%;

}

这使您的社交媒体图标的父元素扩展了页面的整个宽度，并且相对位置意味着顶部标题的子元素将使用顶部标题作为其自身定位的区域。

真的，一个更简单的方法就是使用 flex。

<div class="social-media">
  <img src=".. your icons.."/>
  <img src=".. your icons.."/>
  <img src=".. your icons.."/>
</div>

.social-media{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items:center;
}

推荐阅读