-1

我在使用 WordPress 制作的页面上对齐徽标时遇到问题。

我希望徽标与右侧的商店营业时间高度相同，并与功能区的左边框对齐。

这是我的相关PHP代码：

<!-- Favicon -->
       <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico">

       <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
        <link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>

        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


        <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
        <?php wp_head(); ?>


          <?php
      $g =  of_get_option('google_analytics', '' );
      if (!empty($g)){
    ?>
      <script type="text/javascript"><?php echo $g; ?></script>
<?php } ?>

    </head>

    <body>
    <div class="wrap">
    <div class="container">
    <div class="row">
    <div class="span7 logo">
  <?php $image1 = of_get_option('logo', '' ); 
if($image1 != "") : ?>
        <h1 id="logo"><a href="<?php echo get_option('home'); ?>"><img src="<?php echo $image1; ?>" alt=""/></a></h1>
        <?php endif;?>
    </div><!--end logo--> 
        <div class="span5 open-hours">
         <?php  /* Widgetized sidebar, if you have the plugin installed. */
                    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('OpenHours') ) : ?>

            <?php endif; ?>
    </div><!--end open-hours-->

以下是我的相关 CSS 代码：

@import "css/shortcodes.css";

/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 {font-weight:normal;padding-bottom:10px;}
q:before, q:after { content:''}
strong { font-weight: bold }
em { font-style: italic }
.italic { font-style: italic }
.aligncenter { display:block; margin:0 auto; }
.alignleft { float:left; margin:10px; }
.alignright { float:right;margin:10px; }
.no-margin{margin:0px;}
.no-bottom{margin-bottom:0px;}
.no-padding{padding:0px;}
.margin-t{margin-top:25px;}
div { position:relative } 
a{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active,a:focus{outline: none;}


div,img{ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

/**** GENERAL STYLES*****/
html{-webkit-font-smoothing:antialiased;}
.wrap,.wrap-slider, .wrap-header, .wrap-content,.top-img,#footer{width:980px;margin:0 auto;}
.wrap-content{ background:#fff;padding:20px 0;}
.wrap-slider, .wrap-header{background:#fff;margin-bottom: 20px;}
.wrap-header{margin-top:20px;padding:20px 0;}

.wrapper_food ul{margin-bottom:10px;}
.wrapper_food ul li, .circle li{ background: url("images/circle.png") no-repeat scroll 0 9px transparent;padding: 3px 0 3px 15px;}

h1{font-size: 42px; line-height:42px;}
h2{font-size:36px;line-height:36px;}
h3{font-size:30px;line-height:30px;}
h4{font-size:24px;line-height:24px;}
h5{font-size:18px;line-height:18px;}
h6{font-size:12px;line-height:12px;}
h1, h2{margin-bottom:12px;}
h3, h4, h5, h6{margin-bottom:6px;}
p{margin-bottom:18px;}
.column-clear{clear:both;}
.clear{overflow: hidden;}
/**** END GENERAL STYLES*****/
/**** HEADER STYLES*****/
.open-hours{margin-top:30px;margin-bottom:30px;font-family: 'Merienda One', cursive;padding-left:130px;}
.open-title{font-size:18px;margin-bottom:6px;padding:0;}
.open-day{margin-bottom:6px;}
#menu-holder{margin:0px auto;width:1000px;height:61px;z-index:999;}
.menu{margin: 0px auto;width: 1000px;height: 61px;z-index:999;position:absolute;}
.menu li {padding: 0px 2px 0px 0px; float: left; position: relative; text-transform:uppercase;font-family: 'Oswald', sans-serif;font-size:18px;line-height:1;}
.menu li a {padding:21px 25px 22px 25px;color: #ffffff;display:block;text-shadow: 0 1px 0 rgba(30, 30, 30, 0.6);}
.menu ul { background: #ffffff; display: none; margin: 0; padding: 0; width: 180px; position: absolute; top: 61px; left: 0px;}
.menu ul li {display:block; float: none; margin: 0px 10px; padding:10px 0px;border-bottom:1px solid #f0f0f0;background:none;}
.menu ul li:last-child{border:none;}
.menu ul li:hover a, .menu li:hover li a, .menu ul li.sfHover a, .menu li.sfHover li a { background:none;color:#d5d5d5;border:none;}
.menu li:hover li:hover a, .menu li.sfHover li.sfHover a{color:#353535;}
.menu li:hover > ul, .menu li.sfHover > ul { display: block;}
.menu ul a{font-size: 13px; padding:0px;text-transform:uppercase;width:180px;display:block;height:auto;text-shadow:none;}
.menu ul ul { left: 190px; top:5px; }
.menu .sub-menu li.current_page_item a { color: #353535; }
.mobile-navigation {
    background-color: #F8F8F8;
    color: #8F8F8F;
    display: inline-block;
    font-size: 12px;
    height: 30px;
    line-height: 1.5;
    padding: 5px 10px;
    width: 100%;
    display:none;
}

/**** END HEADER STYLES*****/

谁能看到我需要修改哪些相关代码才能调整徽标的位置和大小？

4

1 回答 1

2

您需要从营业时间中删除 margin-top: 30px。或者为您的徽标添加相同的边距。

使用 Chrome 开发人员工具很容易看到这一点。如果您不熟悉，请在 Chrome 中尝试查看 > 开发人员 > 开发人员工具。然后在左下角，单击放大镜图标。然后你可以点击营业时间和标志，从右边的“计算样式”看到它们的上边距是不同的。

于 2013-06-10T01:52:52.190 回答