将CSS标题徽标更接近布局边缘
我正在帮助一位朋友在他的网站上修改一些小东西，我有一些关于CSS问题的问题。现在，在我尝试将此徽标移近屏幕边缘之前，每个人都告诉我阅读CSS书籍之前 - 了解我是Android / Java开发人员（主要是），我很确定我能够处理这个简单的任务。
这只是表现得有点滑稽，我需要一个快速的手......
我有标题徽标：img src="img/logo.png
从左边缘看起来有点太远了。
我已经看过它自己的图像了，它被裁剪得恰到好处。
我们如何向左移动此徽标？ （每当我尝试更改＃header-inner值时，整个标题会因某些奇怪的原因而崩溃。）
截图：
CSS来源：
/*====HEADER
=======================================================*/
#header {
border-top: 1px solid #525252;
border-bottom: 1px solid #525252;
-webkit-box-shadow: 0 5px 0 #1e1e1e;
-moz-box-shadow: 0 5px 0 #1e1e1e;
box-shadow: 0 5px 0 #1e1e1e;
margin-bottom: 42px;
}
#header-inner {
width: 930px;
margin: 0 auto;
background: url(../img/back-light-1.png) no-repeat left center;
padding: 20px 0;
}
#title {
float: left;
}
#logo h1 {
font-family: Bebas, Arial, sans-serif;
color: #f7f7f7;
padding-top: 10px;
margin-bottom: 3px;
font-size: 30px;
text-shadow: 1px 1px 1px #262626;
letter-spacing: 1px;
font-weight: normal;
}
#logo h1 a {
color: #f7f7f7;
text-decoration: none;
}
#logo h1 a:hover {
text-decoration: none;
}
#logo p {
font-size: 10px;
text-transform: uppercase;
margin-bottom: 0;
color: #f7f7f7;
}
#logo img {
float: left;
margin-right: 10px;
}
/*====NAVIGATION
=======================================================*/
#navigation {
float: right;
margin-top: 2px;
position: relative;
z-index: 1200;
}
#navigation li {
display: block;
float: left;
position: relative;
margin-left: 10px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
-ms-transition: background-color .2s linear;
transition: background-color .2s linear;
}
#navigation li:hover {
background-color: #121212;
text-shadow: none;
}
#navigation li a {
font-family: Bebas, Arial, sans-serif;
font-size: 18px;
color: #f7f7f7;
text-decoration: none;
padding: 10px;
display: inline-block;
margin-bottom: 0px;
}
#navigation li a span {
font-family: Arial, sans-serif;
text-transform: uppercase;
font-size: 9px;
display: block;
line-height: 14px;
}
#navigation li .active-nav, #navigation li .active-nav:hover {
background-color: #8eaf2a;
text-shadow: 1px 1px 0px #333;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
}
#navigation li.dropdown {
border-bottom-left-radius: 0;
}
#navigation li.dropdown .active-nav {
border-bottom-left-radius: 0;
}
HTML来源：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Company Name - NY</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--imports the main css file-->
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--imports prettyPhoto css file-->
<link rel="stylesheet" type="text/css" media="screen" href="css/prettyPhoto.css" />
<!--imports jquery-->
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<!--imports twitter feed plugin-->
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<!--imports easing plugin-->
<script type="text/javascript" src="js/easing.js"></script>
<!--imports prettyPhoto plugin-->
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<!--imports jQuery Tools plugin-->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<!--imports jQuery superfish plugin-->
<script type="text/javascript" src="js/superfish.js"></script>
<!--imports jQuery jflickrfeed plugin-->
<script type="text/javascript" src="js/jflickrfeed.min.js"></script>
<!--imports jQuery AsyncSlider plugin-->
<script type="text/javascript" src="js/jquery.asyncslider.min.js"></script>
<!--imports custom javascript code-->
<script type="text/javascript" src="js/custom.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
// Setup Slider
$("#async-slider").asyncSlider({
keyboardNavigate: true,
easing: 'easeInOutExpo',
minTime: 600,
maxTime: 1500,
autoswitch: 4800,
centerPrevNextNav: false,
slidesNav: false
});
});
</script>
<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
</head>
<body>
<div id="header" class="pattern-1">
<div id="header-inner">
<div id="logo">
<img src="img/logo.png" alt="image description"/>
<div id="title">
<h1><a href="index.asp">Company Name - NY</a></h1>
<p></p>
</div><!-- end title -->
</div><!-- end logo -->
<ul id="navigation">
<li>
<a class="active-nav" href="index.asp">Home
</a>
</li>
<li>
<a href="about.asp">About Us
</a>
</li> <li>
<a href="#">Energy Partnership Program
</a>
</li>
<li>
<a href="#">Products
</a>
</li>
<li>
<a href="#">Contact Us
</a></li>
<li>
<a href="#">Affiliates
</a>
</li>
</ul><!-- end navigation -->
<div class="clear"></div><!-- end clearfix -->
</div><!-- end header-inner -->
</div><!-- end header -->
<!-- BEGIN ASYNC SLIDER -->
<div id="content-slider">
<ul id="async-slider">
<li class="slide">
<div class="three-fifth fl-left" style="width: 425px; height: 242px">
<h2>Company Name - NY</h2>
<h3><i>"A not just for profit company!"</i></h3>
<p>...</a>
</div>
<img class="fl-right" src="img/sliders/async/1.png" alt="image" width="468" height="329" />
</li>
<li class="slide">
<div class="three-fifth fl-left">
<h2>Energy Efficient Lighting Products to fit your needs</h2>
<h3><i>T8, T12, E27, Outdoor Lighting, etc</i></h3>
<p>...</a>
</div>
<img class="fl-right" src="img/sliders/async/2Transparent.png" alt="image" width="347" height="305" />
</li>
<li class="slide">
<div class="three-fifth fl-left">
<h2>Tax Credits and Grants available for those who qualify</h2>
<h3><i>Federal, State and Local tax incentives available</i></h3>
<p>...</a>
</div>
<img class="fl-right" src="img/sliders/async/3.gif" alt="image" />
</li>
<li class="slide">
<img class="fl-left" src="img/sliders/async/4Transparent.png" alt="image" width="347" height="305" />
<div class="three-fifth last fl-right">
<h2>Create a Comprehensive Energy Profile</h2>
<h3><i>Calculate your Energy Savings in Real Time!</i></h3>
<p>...</a>
</div>
</li>
</ul>
<div class="clear"></div><!-- end clearfix -->
</div><!-- end content-slider -->
<!-- END ASYNC SLIDER -->
<div class="container pattern-1">
<div class="tagline">
<div class="tagline-text">
<h2>Welcome to Company Name - NY</span> </h2>
<p><i>"A not just for profit Company!"</i></p>
</div><!-- end tagline-text -->
<div class="tagline-btn">
<a href="#"><span class="main">"Calculate your Energy Savings NOW!"</span><span class="arrow-btn"></span></a>
</div><!-- end tagline-btn -->
<div class="clear"></div>
</div><!-- end tagline -->
</div><!-- end container -->
<div id="wrapper">
<div class="one-half">
<div class="box-title">
<h3>EP Program</h3>
<span class="box-subtitle">Energy Partnership</span>
</div><!-- end box-title -->
<p>Today, with the emphasis on greener energy, products and way of
Life….....The economic climate has businesses looking for any type of
Edge they can utilize to maximize the earnings potential of every dollar
Earned. This requires a proactive, well concieved, structured and
Customized new approach to rectify some of the same issues that have
Plagued all companies regardless of size or industry.
How would you like to be able to cut spending?? Lower monthly
Expenses?? Increase productivity (thus creating growth in revenue and
Potential earnings)?? While not sacrificing employees or the level of
Quality of the products or services offered.Even generate
Revenue from an expense, while improving your workplace environment.
Our epp or energy partnership program takes all fctors of your day-
To-day operations into considertaton when we examine your current
Energy consumption patterns. ....We analyze the data collected, then
Focus on your specific (customized) needs. At this point we strategize
Multiple options that can all be used to save you 40-75% on your very
Next electric bill.
We offer several different ways within the “ep program” to help
Implement your customized plan designed for you to attain these lofty
Goals.</p>
<a class="button" href="about.asp">Continue reading</a>
</div><!-- end one-half -->
<div class="one-half last services">
<div class="box-title">
<h3>Services</h3>
<span class="box-subtitle">Company Name - NY</span>
</div><!-- end box-title -->
<div class="one-fourth">
<div class="box-title">
<h4>Energy Resources:</h4>
<img src="img/icons/spanner.png" alt="image" />
</div><!-- end box-title -->
<p>Information and resources about energy and energy savings.</p>
</div><!-- end one-fourth -->
<div class="one-fourth last">
<div class="box-title">
<h4>Educational Resources:</h4>
<img src="img/icons/pencil.png" alt="image" />
</div><!-- end box-title -->
<p>Your one-stop source for energy efficiency knowledge.</p>
</div><!-- end one-fourth -->
<div class="one-fourth">
<div class="box-title">
<h4>Create Your Energy Profile:</h4>
<img src="img/icons/gear.png" alt="image" />
</div><!-- end box-title -->
<p>Create and Analyze your comprehensive energy profile for FREE!</p>
</div><!-- end one-fourth -->
<div class="one-fourth last">
<div class="box-title">
<h4>Tax Counseling:</h4>
<img src="img/icons/phone.png" alt="image" />
</div><!-- end box-title -->
<p>Find out what Federal, State and Local tax breaks you may qualify for.</p>
</div><!-- end one-fourth -->
</div><!-- end one-half -->
<div class="clear"></div>
<div class="separator"></div>
<div class="title-col">
<h2>Our Latest Projects</h2>
<p>"Coming Soon"</p>
<a class="button" href="#">View Portfolio </a>
</div><!-- end main-col -->
<div class="gallery-thumbs-caption">
<div class="one-fourth">
<div class="gallery-overlay">
<a class="zoom" href="img/portfolio/large/001.jpg" rel="prettyPhoto">
<img class="box-img" src="img/box-img-1.jpg" alt="description" width="200" height="122" />
</a>
</div>
<div class="img-caption">
<h4>Project Title One</h4>
<p>Fusce scelerisque pellentue mi. Suspen disse elementellus lorem ipsum.</p>
</div><!-- end img-caption -->
</div><!-- end one-fourth -->
<div class="one-fourth">
<div class="gallery-overlay">
<a class="play" href="http://vimeo.com/7449107" rel="prettyPhoto">
<img class="box-img" src="img/box-img-2.jpg" alt="description" width="200" height="122" />
</a>
</div>
<div class="img-caption">
<h4>Project Title Two</h4>
<p>Fusce scelerisque pellentue mi. Suspen disse elementellus lorem ipsum.</p>
</div><!-- end img-caption -->
</div><!-- end one-fourth -->
<div class="one-fourth last">
<div class="gallery-overlay">
<a class="link" href="http://www.themeforest.net?iframe=true&width=70%&height=60%" title="themeforest.net" rel="prettyPhoto">
<img class="box-img" src="img/box-img-3.jpg" alt="description" width="200" height="122" />
</a>
</div>
<div class="img-caption">
<h4>Project Title Three</h4>
<p>Fusce scelerisque pellentue mi. Suspen disse elementellus lorem ipsum.</p>
</div><!-- end img-caption -->
</div><!-- end one-fourth -->
<div class="clear"></div>
</div><!-- end gallery-thumbs-caption -->
<div class="separator"></div>
<div class="title-col">
<h2>Latest News</h2>
<p>"Coming Soon"</p>
<a class="button" href="#">Continue Reading </a>
</div><!-- end main-col -->
<div class="news">
<div class="one-fourth">
<h4>Comunion And Two Oracles</h4>
<span class="news-meta">by John Doe on Mar 22, 2012</span>
<p>Praesent lobortis, turpis sit amet dignissim sagittis. Fusce scelerisque pellentesque mi... <a href="#">read more</a></p>
</div><!-- end one-fourth -->
<div class="one-fourth">
<h4>Orion The Hunter</h4>
<span class="news-meta">by John Doe on Mar 22, 2012</span>
<p>Praesent lobortis, turpis sit amet dignissim sagittis. Fusce scelerisque pellentesque mi... <a href="#">read more</a></p>
</div><!-- end one-fourth -->
<div class="one-fourth last">
<h4>Through The Looking Glass</h4>
<span class="news-meta">by John Doe on Mar 22, 2012</span>
<p>Praesent lobortis, turpis sit amet dignissim sagittis. Fusce scelerisque pellentesque mi... <a href="#">read more</a></p>
</div><!-- end one-fourth -->
<div class="clear"></div>
</div><!-- end news -->
</div><!-- end wrapper -->
<!--#include file="footer.asp" -->
2 个答案:
答案 0 :(得分：1)
这取决于是否在＃header-inner上设置了填充值，您减少了左边的填充值以使#logo更靠近左边。
如果您想在不更改填充的情况下仅将徽标向左移动。您可以使用负左边距或左边值。这需要添加位置：相对于#logo元素（如果使用左边）或使用负左边距（不需要设置为相对定位）。
答案 1 :(得分：0)
我的猜测，您float:left设置了#logo img，因此父元素的padding除非与relative对齐，否则不会生效附近的那些元素（#logo *和header*）。从我在代码中可以看出，左边唯一的其他DOM是title。
使用相对布局时，可以通过以下任一方式完成此偏移：
-
在您的案例
-
#logo -
Margin您案例#logo img中的具体元素
Padding和#header-inner 中，父组中的按照您目前的等级制度，您可以向孩子和兄弟姐妹求助：
header - ＆gt; header-inner - ＆gt; logo - ＆gt; img | title | h1 | p
关系水平越高（最接近左侧）将对任何相关的孩子或兄弟姐妹产生直接影响。
如果您要使用float分组，我建议在父float中使用div，并从子代继承，如：
#header {
float:left;
#header-inner{ /*direct parent of #logo*/
float:inherit;
}
#logo{ /*direct parent of #logo img*/
float:inherit;
...
}
#logo h1 {
float:inherit;
...
}
#logo p{
float:inherit;
...
}
#logo img{
float:inherit;
...
}
至少应该确保父母对相对位置做出贡献。您可能还需要考虑clear:left|right|both，以确保您的布局根据您的选择跳过内容。
值得注意的是，使用float时的某些分组元素可能有助于指定组中每个元素的width。
我自己对CSS比较陌生，但是在使用float时我遇到了对齐问题，这在嵌套布局中并不总是很明显。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？