导航{

Question

Weebly菜单和徽标所以我一直在阅读我在网上想到的任何地方，以解决徽标和导航在同一条线上的问题。是的，我已尝试过Stackoverflow上的其他文章。

我已经更改了代码行，添加了代码行，它会移动一些东西，但拒绝将它们放在同一行上。

代码是这样的：

/* LOGO & MENU */
    #header{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

.navContainer{
    width: 500px;
    height: auto;
    background: url('navbg.jpg') repeat;
    text-align: right;
    display: inline;
    overflow: hidden;
}

.logo {
    width: 200px;
    min-height: 20px;
    height: auto;
    margin: none;
    float: left;
    display: inline;
}
span.wsite-logo {line-height: 1;}
#logo, #logo a, #wsite-title {
  color: #2a2a2a !important;
  text-decoration: none !important;
  font-family: "Open Sans", sans-serif; 
  font-size: 44px; 
  font-weight: lighter;
  font-weight: 300;
  line-height: 1;
}


/* Navigation Menu */
#navigation{
    float: right; 
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee; 
    height: 100px;
    display:inline;
    overflow: hidden;
}
#navigation a, #icontent #navigation li:last-child a{ 
    display:inline-block; 
    text-decoration:none; 
    line-height:  1;
    padding: 20px 16px;
    border-right: 1px solid #eee;
}
#navigation li:last-child a, #icontent #navigation span:last-child li a{border-right:     none;}
#navigation ul{margin:  0;  list-style:  none;}
#navigation li{display:inline;}
#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 0; }
#weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
#weebly-menus .weebly-menu li { width: 162px; text-align: left; margin-top: 2px;}
#weebly-menus .weebly-menu li a { 
        border: none; 
        display: block; 
        background-color: #ffffff; 
        text-decoration: none; 
        font-size: 12px; 
        font-weight: normal; 
        line-height:1;
        padding: 5px 0px;  
        color: #000;
        font-family: Helvetica, sans-serif;
        width: 160px;
        height:  auto;
        border: 1px solid #eee;
}

#weebly-menus .weebly-menu-wrap, #wsite-menus .wsite-menu-wrap {
    z-index:  5000; 
    margin:  0; 
    postiion:  relative !important;
}

请帮忙。我想要了解更多，但是你是否已经达到了你的大脑只是通过尝试不同的你想要的解决方案而被炒的点，而事实证明它不起作用。现在我在哪里!!!!

该网站的链接是：Site preview 此外，我在将简单文本放在导航右侧时遇到了麻烦。

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024">

<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

<!-- JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

</head>

<body class='tall-header  wsite-theme-light'>

<div class="note" style="text-align: center;"><p>This gap is here to allow you to see the text tool bar for the header bar below. When site is published, the gap will disappear</p></div>

<div id="wrapper">

    <div id="bar">
        <div class="frame clearfix">
            <div class="bar-text"><p>{call:text}</p></div>
            <div id="search-button"><i class="af-search"></i></div>
            <div class="social-frame">{social}</div>                
            <div class="search-bar">{search}</div>
        </div>
    </div>  

    <header id="header">
        <div class="navContainer clearfix">
            <div class="logo med-padding">{logo}</div>
            <nav><div id="navigation">{menu}</div></nav>  
        </div>
        <div class="sliderContainer">               
            <div id="tall-header-image" class="wsite-header"></div> 
        </div>
    </header>

    <div id="main" role="main">
        <div class="frame">
            <div class="content large-padding">{content}</div>
        </div>
    </div>

    <footer>
        <div id="footer" class="large-padding clearfix">
            <div class="frame">
                <div class="note" style="text-align: center;"><p>Drag &amp; drop footer content here</p></div>
                <div id="footer-content" class="med-padding">{bottom:content}    </div>                 
                <div id="footer-content" class="med-padding"     style="display:none;">{footer}</div>
            </div>
        </div>
        <div id="footer-bottom" class="feature small-padding">
            <div class="frame">
                <div class="copyright"><p>{copyright:text}</p></div>
            </div>
        </div>
    </footer>


</div>


<script type="text/javascript" src="/files/theme/basic-header.js"></script>

</body>
</html>

Answer 1

将span.wsite-logo类直接放在nav标记下，之后更改div类中的span类，并将float：left添加到类.wsite-logo。

删除logo div class logo med-padding。

Answer 2

一些有效的建议!!

css的第120行，在#navigation中，更改文本右对齐以使其水平移动，或者添加margin-top：3％;垂直移动，或两者兼有，或其他各种组合。

导航{

text-align：center;

border-bottom：1px solid #eee;

border-top：1px solid #eee;

float：none;

margin-top：3％;

导航和徽标相同的线

2 个答案:

导航{