2

我正在使用 Twitter bootstrap wordpress 主题。我希望徽标（人脸图片）出现在博客标题旁边。我已经尝试过绝对定位和相对定位以及其他 css 样式，但是如果不扩展工具栏的高度或无意中影响相邻元素，我就无法让徽标出现在正确的位置。

如何修复 css 以使徽标在所有浏览器中正确显示并且不会无意中影响任何其他元素？

这是 header.php 的源代码，工具栏在正文中生成并位于页面顶部。

<div class="container-fluid nav-container">
                        <nav role="navigation"><img style="z-index: 10; position:absolute; margin-left: -235px" src="http://blog.freeteacher.co.uk/wp-content/themes/wordpress-bootstrap-V2.1/images/logo_small.png">
                            <a class="brand" id="logo" title="Fun Learning for Children | Resources for Parents and Teachers" href="http://blog.freeteacher.co.uk">FreeTeacher – Blog</a>

                            <a 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>
                            </a>

                            <div class="nav-collapse">
                                <ul id="menu-main" class="nav"><li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://blog.freeteacher.co.uk/about/">About</a></li>


                        </nav>

                                                    <form class="navbar-search pull-right" role="search" method="get" id="searchform" action="http://blog.freeteacher.co.uk/">
                            <input name="s" id="s" type="text" class="search-query placeholder" placeholder="Search">
                        </form>

                    </div>

这是 css 文件的链接，它只是 twitter 引导 css http://blog.freeteacher.co.uk/wp-content/themes/wordpress-bootstrap-V2.1/css/bootstrap.min.css

另外 - 这是正在呈现的页面

http://blog.freeteacher.co.uk/news/getting-to-know-each-other/

4

1 回答 1

1

根据我在 Firebug 中的测试，如果您将<img>元素的内联样式从更改为margin-left:-235px;，left:35px;您最终会得到您正在寻找的内容。您可以从 35px 调整该值，以便将其准确地放在您想要的位置。要确定它始终在您想要的位置，也值得设置top: 0;，但这可能不是必需的。

作为参考，这是有效的，因为您已经position:absolute;设置，这意味着它将参考第一个分配了位置的容器元素定位元素，或者如果（在本例中）没有这样的父元素，则将元素定位为整个文档元素。因此，设置top:0; left:35px;告诉浏览器将图像从左上角向下放置 0 像素，向左放置 35 像素。

于 2012-05-17T02:47:16.157 回答