html - 导航和标志同一条线-6ren

html - 导航和标志同一条线

转载作者：行者123 更新时间：2023-11-28 09:14:36

25

4

Weebly 菜单和 Logo 因此，我一直在到处阅读我能想到的在线内容来解决 Logo 和导航位于同一行的问题。是的，我尝试了 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>

最佳答案

将 span.wsite-logo 类直接放在 nav 标签下，然后在 div 类中更改 span 类并添加一个 float: left 到类 .wsite-logo。

删除 Logo div 类 Logo med-padding。

关于html - 导航和标志同一条线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26344843/

25

4

0

文章推荐： css - 将 SVN 用于具有自定义内容的共享代码库

文章推荐： html - 使切换菜单按钮变粘

Mdx - 标志 - 实际
我有两个维度 DimFlag 和 DimPNL 以及一个事实表 FactAmount 。我正在寻找:当 pnl 是 stat(Is Stat=1) 时:sum (Actual x FlagId)对于
JAAS LoginModule 标志
我试图弄清楚登录模块标志在 JAAS 中是如何工作的(使用 JBoss 5.1 EAP)，我遇到了一个令人费解的情况，我希望有人能为我澄清一下。对于背景，我的 login-config.xml 如下
c# - 为什么没有搜索引擎可以搜索到~标志？
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 9 年前。 Improve this
Javadoc 无法识别文档标题选项/标志
我正在通过 gradle 使用 doclet 运行 javadoc，当我运行 javadoc/doclet 任务时，我收到下一个错误: error - invalid flag: -doctitle
mysql - Sqoop导入 “--where”标志
我尝试使用sqoop --where标志将特定的行从MySQL表导入到HDFS，但是结果不符合预期。命令: sqoop import \ --connect "jdbc:mysql://XXXX
javascript - 在语言面板中切换图像(标志)
我有一个语言面板，其中有一个图像 (main-image)，显示页面加载时的情况。我还有三个额外的图像，它们在页面加载时隐藏。问题是当点击附加图像之一时如何切换主图像。我需要使用单击的 image
javascript - ContentEditable 标志？
奇怪...在 StackOverflow 上有很多关于此 attr 的问题，但没有人回答我的以下问题: 我有一个span(仅作为示例)，其中启用了ContentEditable。我只想保存更改的元素(
javascript - 如何在饼图中鼠标悬停时显示 "%"标志
我正在使用 ChartJS 2.0 在 UI 上绘制图表。而且我能够呈现饼图。但我希望鼠标悬停时显示数据以及“%”符号。我如何追加 % 因此，如果在鼠标悬停时我得到 Rented: 93 我想看到 R
Java HttpOnly 标志
我使用的是 Servlet 3.0，我想用 HttpOnly 标志保护我的 cookie。我的 web.xml 是 true
Android onStartCommand 标志
我有一个简单的服务: public class TestService extends Service { final String LOG_TAG = "myLogs"; public void o
bash - 转义 "#"标志
我正在尝试将 wget 与包含“#”符号的 url 一起使用。无论我做什么来逃避这个角色，它都不起作用。我用过\、' 和 "。但它们都不起作用。有人有什么建议吗？谢谢! 最佳答案如果您真的想让它有
mysql 命令行转义 - 标志
我正在尝试创建一个数据库，但我不知道如何转义数据库名称中的 - 符号。 mysql> create database happy-face; 给我一个错误 mysql> create databa
java - 我程序上的额外 + 标志
我为我的计算机科学类(class)编写了一个程序，它读取一个文件并导入数据，然后只添加数字，但它似乎添加了一个额外的加号。 import java.io.*; //necessary for File
html - 如何在与某些文本相同的行中获取图片(标志)？
可能是个愚蠢的问题，但我怎样才能在与某些文本看到图像相同的行中获取图像(在本例中为标志)？到目前为止我的 HTML 代码: FRA 最佳答案试试这个: img { height:20px
克隆和 CLONE_CHILD_CLEARTID 标志
我需要一些有关 clone() 系统调用的帮助。我试图将它与标志 CLONE_CHILD_CLEARTID 一起使用，但我看不到我指定为参数的字段值有任何变化。这是一个简单的代码: int the_c
转储中的 MySQL 标志
查看 mySQL 转储时，我遇到了一些东西，想知道它们是什么。我明白了: /*!50001 DROP TABLE IF EXISTS `xxx` */; flag 50001是什么意思，有什么意思的
禁止原始类型的 Javac 标志？
是否可以传递任何 Java 编译器标志来告诉编译器不允许使用原始类型？也就是说，对于任何泛型类，让编译器强制使用参数化版本，否则抛出编译错误？最佳答案 JDK7 (b38) 介绍 -Xlint:ra
c# - 如何获得枚举的所有可能组合(标志)
[Flags] public enum MyEnum { None = 0, Setting1 = (1 GetAllEnums() where T : struct
Android - PackageManager 标志
我正在浏览 PackageManager API。我发现定义了以下常量: 1) GET_DISABLED_COMPONENTS 2) GET_DISABLED_UNTIL_USED_COMPONENT
不能用宏包装 cgo 标志
我编写了一个 Go 程序来模拟按键操作。为此，我必须使用 cgo 和不同的 C 代码片段，具体取决于正在编译 Go 代码的操作系统。我编写的代码如下所示: package keyboard /* #i

首页

博学

6Ren·AI

商城

html - 导航和标志同一条线