- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我想要一种方法让我的菜单半左半右浮动。这样导航栏中间的 Logo 就这样 float 在中心,然后一半的菜单项在菜单的左侧,另一半在右侧。
这是我目前的代码工作目录:http://theaamgroup.com/david-programs/brandit/
基本上,如果不清楚,我想在这里制作这个导航栏:
看起来像这样:
HTML
<!-- Carousel
================================================== -->
<div id="Carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="lib/img/carousel/slide-01.jpg" alt="">
</div>
<div class="item">
<img src="lib/img/carousel/slide-02.jpg" alt="">
</div>
<div class="item">
<img src="lib/img/carousel/slide-03.jpg" alt="">
</div>
</div>
<a class="left carousel-control" href="#Carousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#Carousel" data-slide="next">›</a>
</div><!-- /.carousel -->
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<img src="lib/img/logos/Brandit_Logo.png" width="303" height="228" alt="Logos" class="MainLogo"/>
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#"></a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
CSS
/* GLOBAL STYLES
-------------------------------------------------- */
body { padding-bottom: 40px; -webkit-text-size-adjust: none; -webkit-appearance: none; font-family: sans-serif; min-height: 416px; background-image: url('../img/bkg.png'); background-repeat: repeat; }
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper { position: absolute; z-index: 5; margin-top: -85px; width: 100% }
.navbar-wrapper .navbar { }
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner { border: 0; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
/* Downsize the brand/project name a bit */
.navbar .brand { padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */ font-size: 16px; font-weight: bold; text-shadow: 0 -1px 0 rgba(0,0,0,.5); }
.navbar .nav > li > a { padding: 15px 20px }
/* Offset the responsive button for proper vertical alignment */
.MainLogo { position: absolute; left: 50%; right: 0; margin-top: -90px; margin-left: -152px; }
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel { margin-bottom: 60px }
.carousel .container { position: relative; z-index: 10; }
.carousel-control { height: 80px; margin-top: 0; font-size: 120px; text-shadow: 0 1px 1px rgba(0,0,0,.4); background-color: transparent; border: 0; z-index: 10; }
.carousel .item { height: 500px }
.carousel img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; }
.carousel-caption { background-color: transparent; position: static; max-width: 550px; padding: 0 20px; margin-top: 200px; }
.carousel-caption h1,
.carousel-caption .lead { margin: 0; line-height: 1.25; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.carousel-caption .btn { margin-top: 10px }
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) {
.container.navbar-wrapper { margin-bottom: 0; width: auto; }
.navbar-wrapper { height: 50px; margin-top: -60px; }
.navbar-inner { margin: -20px 0; }
.navbar .nav > li { z-index: 0; }
.MainLogo { margin-top: -115px; }
.carousel .item { height: 500px }
.carousel img { width: auto; height: 500px; }
.marketing { margin-top: 30px; }
.featurette { height: auto; padding: 0; }
.featurette-image.pull-left,
.featurette-image.pull-right { display: block; float: none; max-width: 40%; margin: 0 auto 20px; }
}
@media (max-width: 767px) {
.navbar-inner { border-radius: 0; }
.btn-navbar { position: absolute; left: 85%; z-index: 5; }
.MainLogo { margin-top: -185px; }
.carousel .container { }
.carousel .item { height: 300px }
.carousel img { height: 300px }
.carousel-caption { width: 65%; padding: 0 70px; margin-top: 100px; }
.carousel-caption h1 { font-size: 30px }
.carousel-caption .lead,
.carousel-caption .btn { font-size: 18px }
.marketing .span4 + .span4 { margin-top: 40px }
.featurette-heading { font-size: 30px }
.featurette .lead { font-size: 18px; line-height: 1.5; }
}
如果能给我指明正确方向的一点帮助就太好了。提前致谢!
最佳答案
我在 firebug 中修改了你的菜单并将图像从其原始位置删除,并将其作为新元素放置在你的菜单 li 中:
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><img width="303" height="228" src="lib/img/logos/Brandit_Logo.png" alt="Logos" class="MainLogo"></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
...
然后我调整了 li
的 css 调用,添加:
.navbar .nav > li {
display: inline-block;
这应该让您走上正确的轨道,根据需要完成样式设置。
此外,您可以从 .nav
中删除 float:left;
,因为 position:relative;
不需要它>
关于jquery - CSS 菜单半左半右浮动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21116296/
这个问题已经有答案了: Declaring multiple object pointers on one line causes compiler error (5 个回答) 已关闭 6 年前。 l
我目前正在学习语言处理器,经常出现的一个话题是语法中元素的使用方向。从左到右或从右到左。 我理解这个概念,但似乎有很多方法可以编写这些规则,我不确定它们是否都相同。到目前为止我看到的是: 右/左递归,
我有一个很长的线性(分支不多)流程图,在 graphviz 中显示为要么太高而无法放在单个页面上,要么太宽(如果方向是从左到右) 是否有一种简单的方法可以让 graphviz 以从左到右,然后向下,然
我一直摸不着头脑,但运气不好。设计器有一个包含 3 栏的站点、两个侧边栏和一个主要内容区域。 专为桌面设计,左栏、主要内容、右栏。但是,在较小的设备上,我们希望首先堆叠主要内容。 所以通常情况下,你可
我想要从上到下和从左到右组织的 css block 。 为了更好地解释这是一张图片,其中包含我到目前为止所获得的内容以及我希望使用 CSS 实现的内容: 代码如下: HTML: 1 2 3 4 5
当我问this question时,答案之一(现已删除)建议Either类型对应Curry-Howard correspondence中的XOR而不是OR,因为它不能同时是Left和Right。 真相
我有一个程序,如果用户按住向左或向右箭头键, Angular 色会逐渐朝那个方向加速,并最终达到最大速度。松开按键后, Angular 色逐渐减速,直至完全停止。 我的右方向键没问题,但左方向键坏了。
今天很简单的一个。我有一个专栏,我们称之为标题,有一堆项目标题。我需要从“:”的左侧拉出所有内容并进行左/右修剪(稍后我将在连接中使用它,但我现在只需要一个包含新数据的列) .下面是当前列的示例: 这
我正在尝试将图表中的列与左侧对齐。默认情况下,它们位于中间。 我在 API 文档中找不到任何关于此的信息。 Here是一个 jsFiddle 测试。 最佳答案 在 highcharts api 中,您
左旋转进位和右旋转进位指令有哪些实际用途? 在我的汇编课上,我们无法想出一个有用的好例子。 最佳答案 如果您想将位从一个操作数移出并移入另一个操作数: SHL EAX, 1 ; mov
我有一个查询,它使用 eqjoin 从两个不同的表返回以下数据。我想将 left 和 right 结合起来,而不是执行 zip() (重写 name > 和 joined_at),我想将右侧对象的属性
我使用 firebase API。发送和检索消息。但是,我在尝试为发送者/检索者设置布局时遇到麻烦,以便消息将左/右对齐。目前我只有发送者/检索者都使用的一种布局,但不确定如何设置不同的布局。 pub
我的菜单基本上是一个水平项目滑动条。所有菜单项都有特定的默认 CSS 属性。我希望这些项目在到达主容器的中心时更改其大小和左/右边距,并在离开主容器(或位于主容器之外)时重置为默认值。请参阅我的原理图
我有一个引用表,在这个表中有 3 个字段(Id、User1、User2)。 User2 字段可以为空,但我们在不使用时使用 0。 当我执行下面的 Linq 查询时,User2 == 0 的记录不是结果
不知道如何解决这个问题。 我有两个表结果和受访者 我需要查明受访者表中是否有任何行具有completion =“Complete”,但它们的respondent_id(在结果表和受访者表中)不在结果表
我正在尝试访问三个表以获得类似这样的内容: +------+------+------+ | ITEM | PCS | CSS | +------+------+------+ | 1099 |
left 和 right join 有区别吗,下面的sql 语句结果一样,但是两者的性能是一样的吗? SELECT count(*) FROM writers RIGHT JOIN blogs O
当我使用 LEFT() 使用以下代码从数据库中获取值时 $select="SELECT LEFT(description,500) FROM tbl_news where id='$id'"; $qu
当我将鼠标悬停在水平导航菜单上的页面名称上时,相关子页面会 float 在下方。 目前这些显示居中,我如何对齐它们以便它们向左对齐(与导航菜单标题名称一致)。 你可以去看到这个 http://79.1
在下面的引导网格示例中,它使用 col-sm 和 col-sm-push/pull。col-sm-push 指定了左/右值(偏移量)。 我不太清楚它是如何工作的。 第二个 float 元素来到第一个
我是一名优秀的程序员,十分优秀!