如何排列CSS元素？有没有可以使用的工具？ [英] How do I line up CSS elements? Is there a tool I can use?
问题描述
根据我原来问题的答案，我修改了我的代码。我希望有人能告诉我，如果这是一个更好的方法比较。我的原始帖子和代码如下。
UPDATED CODE
！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< meta http-equiv =Content-Languagecontent =en-us/>
< meta name =keywordscontent =/>
< meta name =descriptioncontent =/>
< meta name =authorcontent =/>
< title>示例< / title>
< base href =/>
< link rel =stylesheettype =text / csshref =/>
< style type =text / css>
* {
margin：0;
padding：0;
}
#wrapper {
}
#header {
background-image：url（'images / bg-inner-page.gif'）;
height：200px;
}
#logo {
float：left;
margin-top：50px;
margin-left：100px;
}
#topnav {
float：right;
margin-top：50px;
margin-right：1250px;
}
#topnav ul {
word-spacing：10px;
}
#topnav ul li {
list-style-type：none;
display：inline;
}
#content {
背景颜色：橙色;
}
#footer {
background-color：blue;
}
< / style>
< / head>
< body>
< div id =wrapper>
< div id =header>
< div id =logo>
logo
< / div>
< div id =topnav>
< ul>
< li>首页< / li>
< li>关于< / li>
< li>浏览< / li>
< li> faq< / li>
< li>联系人< / li>
< / ul>
< / div>
< / div>
< div id =content> content< / div>
< div id =footer> footer< / div>
< / div>
< / body>
< / html>
ORIGINAL POST
我是编程世界和CSS的新手。我试图排队CSS元素，但不知道我可以放置某种线条来获得确切的行高，位置等。我试图使用FireBug然而没有效果。有没有一些工具，我可以使用这可能在画布上放置一个网格？
编辑
这是我使用的代码示例。
<！DOCTYPE html PUBLIC / W3C // DTD XHTML 1.0 Strict // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlins =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< meta http-equiv =Content-Languagecontent =en-us/>
< meta name =keywordscontent =/>
< meta name =descriptioncontent =/>
< meta name =authorcontent =/>
< title>示例< / title>
< base href =/>
< link rel =stylesheettype =text / csshref =/>
< style type =text / css>
body {
margin：0;
padding：0;
}
#wrapper {
}
#header {
background-image：url（'images / bg-inner-page.gif'）;
height：200px;
}
#logo {
width：20px;
position：relative;
top：50px;
left：100px;
}
#topnav {
width：500px;
position：relative;
top：14px;
left：150px;
}
#topnav ul {
word-spacing：10px;
}
#topnav ul li {
list-style-type：none;
display：inline;
word-spacing：10px;
}
#content {
background-color：orange;
}
#footer {
background-color：blue;
}
< / style>
< / head>
< body>
< div id =wrapper>
< div id =header>
< div id =logo>
logo
< / div>
< div id =topnav>
< ul>
< li>首页< / li>
< li>关于< / li>
< li>浏览< / li>
< li> faq< / li>
< li> contact< / li>
< / ul>
< / div>
< / div>
< div id =content> content< / div>
< div id =footer> footer< / div>
< / div>
< / body>
< / html>
解决方案布局在网页。您永远不能告诉您使用哪个浏览器，哪个平台上的分辨率以及安装了哪个字体您的未来客户将查看该页面。
使用HTML和CSS指定逻辑布局的文档。告诉渲染机，哪些部分具有强调，这些不重要等等，并且让渲染器决定如何在目标显示和UI主题上表示它的最佳方式。
如果你开始担心像素精确的线高度，你的页面最探索的将看起来在一个浏览器上膨胀，在一个平台上的一个分辨率，在世界其他地方，如turd。
从物理标记移动到逻辑标记。
In light of the answers to the original question I had, I have amended my code. I was hoping if someone could tell me if this is a better approach in comparison. My original post and code is below.
UPDATED CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content= "" /> <title>Example</title> <base href="" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> * { margin: 0; padding: 0; } #wrapper { } #header { background-image: url('images/bg-inner-page.gif'); height: 200px; } #logo { float: left; margin-top: 50px; margin-left: 100px; } #topnav { float: right; margin-top: 50px; margin-right: 1250px; } #topnav ul { word-spacing: 10px; } #topnav ul li { list-style-type: none; display: inline; } #content { background-color: orange; } #footer { background-color: blue; } </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> logo </div> <div id="topnav"> <ul> <li>home</li> <li>about</li> <li>browse</li> <li>faq</li> <li>contact</li> </ul> </div> </div> <div id="content">content</div> <div id="footer">footer</div> </div> </body> </html>ORIGINAL POST
I am new to the world of coding as well as CSS. I am attempting to line up CSS elements however unaware how I can place some sort of lines to get the exact line-height, position, etc. I attempted to use FireBug however to no avail. Is there some of tool I can use that possible places a grid over the canvas?
EDIT
Here is a sample of the code I am working with.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content= "" /> <title>Example</title> <base href="" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> body { margin: 0; padding: 0; } #wrapper { } #header { background-image: url('images/bg-inner-page.gif'); height: 200px; } #logo { width: 20px; position: relative; top: 50px; left: 100px; } #topnav { width: 500px; position: relative; top: 14px; left: 150px; } #topnav ul { word-spacing: 10px; } #topnav ul li { list-style-type: none; display: inline; word-spacing: 10px; } #content { background-color: orange; } #footer { background-color: blue; } </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> logo </div> <div id="topnav"> <ul> <li>home</li> <li>about</li> <li>browse</li> <li>faq</li> <li>contact</li> </ul> </div> </div> <div id="content">content</div> <div id="footer">footer</div> </div> </body> </html>
解决方案It is generally inadvisable to do pixel-by-pixel layout in webpages. You can never tell with which browser, which resolution on which platform and with which fonts installed your future customer will view the page.
Use HTML and CSS to specify a logical layout of the document. Tell the rendering machine, which parts have enphasis, which are less important and so on and let the renderer decide how to represent it the best way on the target display and UI-theme.
If you start worrying about pixel-exact line heights, your page most probebly will look swell on one browser, in one resolution on one platform and in the rest of the world like turd.
Move from physical mark-up to logical mark-up.
这篇关于如何排列CSS元素？有没有可以使用的工具？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
