html - 为什么我的社交媒体图标不显示在屏幕上？

我试图将我的社交媒体图标放在标题栏的右上角。但是，当我尝试“浮动：正确；”时它们，它们似乎离屏幕太远了。当我尝试使用“ position：absolute;”更正此问题时，什么也没有发生。

您可以在下面看到问题。

在我漂浮之前：对；他们：

我漂浮后：对；他们：

如果有人想去检查页面，我的网站是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>

最佳答案

在使用position：absolute时，您需要在父元素上紧跟一个position：relative。

因此，如果您是社交媒体图标元素，则位于其中：

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

您的“顶部标题”类应具有：

.top-header{

    position:relative;
    width: 100%;

}

这使社交媒体图标的父元素扩展了页面的整个宽度，而相对位置意味着top-header的子元素将使用top-header作为其自身区域。

确实，做所有这些事情的简单得多的方法就是使用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;
}

关于html - 为什么我的社交媒体图标不显示在屏幕上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57893891/