Css 内联块样式
我举了一个例子：Css 内联块样式,css,Css,我举了一个例子： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <link rel="profile" href="http://gmpg.org/xfn/11" /> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/sv
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
line-height: 1;
}
/*ol,
ul {
list-style: none;
}*/
/* dl, dt, dd, ol, ul, li {
margin: 0;
padding: 0;
} */
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th,
td {
font-weight: normal;
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
}
html {
overflow-y: scroll;
font-size: 87.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font-size: 14px;
font-size: 1rem;
font-family: Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
/*color: #444; */
color: #fff;
background-color: #eaeaea;
}
.site {
/*padding: 0 24px;
padding: 5em 1.714285714em;
padding: 2em 10%;*/
background-color: #eaeaea;
}
#container {
border: 0.1em solid black;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 900px;
/*background-color: #fdeb43;*/
background: url('body_bk.png') left top repeat !important;
}
.clear { clear: both;}
.site-header {
padding: 24px 0;
padding: 1.714285714rem 0;
}
.div-header {
width: 100%;
margin-top: -14px;
background: url('images/background.png') left top no-repeat !important;
}
.logo_container, .logo_container img {
position: relative;
z-index: 1000 !important;
}
.container_sport1 {
}
.video {
text-align: center;
width: 49%;
}
.logo { text-align: center; padding-top: 20px; }
.video { float: right; }
.topheader-row {
width: 100%;
border: 0.1em dotted yellow;
}
.topheader-row span {
display:-moz-inline-stack;
display:inline-block;
*display:inline;
}
.empty-topheader, .search-header {
border: 0.1em solid green;
margin-top: 0.1em;
margin-left: 0.5em;
}
.empty-topheader { width: 60%; }
.search-header { width: 28%; }
form#searchform {
display:block;
width:255px;
height:20px;
position:absolute;
/*top:56px;
left:753px;*/
}
.searchbutton {
color: #0066ff;
border: 0px solid;
display:block;
width:45px;
height:20px;
background: #d2e4ff;
position:absolute;
top:0px;
left:202px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 4px;
font-size: 12px;
}
.searchbutton:hover {
background-color: #0066ff;
color: #ffffff;
font-size: 12px;
}
.searchfield {
background:url(/images/search-field-shadow.png) top left repeat-x #666666;
color: #eeeeee;
border: 0px solid;
position: absolute;
top:0px;
left:0px;
display:block;
width:200px;
height:20px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="page" class="hfeed site">
<div id="container">
<header id="masthead">
<hgroup>
<div class="topheader-row">
<span><div class="empty-topheader">let's add on the right place searchfield plus facebook button</div></span>
<span>
<div class="search-header">
<form method="get" id="searchform" action="">
<input type="text" value="" name="s" id="s" class="searchfield" />
<input type="submit" id="searchsubmit" value="search" class="searchbutton"/>
</form>
</div>
</span>
</div>
<div id="mastdivhead" class="div-header">
<div class="logo">
<div class="logo_container">
<a href="http://www.gsensvarese.it"><img src="logo_gsensvarese.png" /></a>
</div>
</div>
<div id="container_sport1" class="container_sport1"></div>
</div>
</hgroup>
</header>
</body>
</html>
html，body，div，span，applet，object，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，abbr，首字母缩写，address，big，cite，code，del，dfn，em，img，ins，kbd，q，s，samp，small，strike，strong，sub，sup，tt，var，b，u，i，center，fieldset，form，label，label，ledge，table，table，table，title，tbody，tfoot，tfoot，thead，th，th，td，article，side，canvas，des，details，嵌入、图形、figcaption、页脚、页眉、hgroup、菜单、导航、输出、ruby、节、摘要、时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
垂直对齐：基线；
}
身体{
线高：1；
}
/*ol,，
保险商实验室{
列表样式：无；
}*/
/*dl、dt、dd、ol、ul、li{
保证金：0；
填充：0；
} */
块引用，
q{
报价：无；
}
blockquote：之前，
blockquote：之后，
问:以前,，
问：之后{
内容：''；
内容：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
说明文字
th，
运输署{
字体大小：正常；
文本对齐：左对齐；
}
h1，
h2，
h3，
h4，
h5，
h6{
明确：两者皆有；
}
html{
溢出y：滚动；
字体大小：87.5%；
-webkit文本大小调整：100%；
-ms文本大小调整：100%；
}
身体{
字体大小：14px；
字号：1rem；
字体系列：Helvetica、Arial、无衬线字体；
文本呈现：优化易读性；
/*颜色：#444*/
颜色：#fff；
背景色：#eaeaea；
}
.地点{
/*填充：0 24px；
填充：5em 1.714285714em；
填充物：2米10%*/
背景色：#eaeaea；
}
#容器{
边框：0.1米纯黑色；
左边距：自动；
右边距：自动；
边缘顶部：20px；
宽度：900px；
/*背景色：#fdeb43*/
背景：url（'body_bk.png'）左上方重复！重要；
}
.clear{clear:两者；}
.网站标题{
填充：24px0；
填充：1.714285714rem 0；
}
.div标题{
宽度：100%；
利润上限：-14px；
背景：url（'images/background.png'）左上方不重复！重要；
}
.logo\u容器、.logo\u容器img{
位置：相对位置；
z指数：1000！重要；
}
.货柜码头1{
}
.video{
文本对齐：居中；
宽度：49%；
}
.logo{文本对齐：居中；填充顶部：20px；}
.video{float:right；}
.topheader行{
宽度：100%；
边框：0.1米黄色虚线；
}
.topheader行span{
显示：-moz内联堆栈；
显示：内联块；
*显示：内联；
}
.topheader为空，.search header{
边框：0.1米纯绿色；
边缘顶部：0.1米；
左边距：0.5em；
}
.topheader为空{宽度：60%；}
.search标头{宽度：28%；}
表单#搜索表单{
显示：块；
宽度：255px；
高度：20px；
位置：绝对位置；
/*顶部：56px；
左：753px*/
}
.搜索按钮{
颜色：#0066ff；
边框：0px实心；
显示：块；
宽度：45px；
高度：20px；
背景：#d2e4ff；
位置：绝对位置；
顶部：0px；
左：202px；
-moz边框半径右下角：4px；
-moz边框半径右上角：4px；
-webkit边框右下半径：4px；
-webkit边框右上角半径：4px；
字体大小：12px；
}
.搜索按钮：悬停{
背景色：#0066ff；
颜色：#ffffff；
字体大小：12px；
}
.searchfield{
背景：url（/images/search field shadow.png）左上角repeat-x#666666；
颜色：#eeeeee；
边框：0px实心；
位置：绝对位置；
顶部：0px；
左：0px；
显示：块；
宽度：200px；
高度：20px；
-moz边框半径左下角：4px；
-左上角moz边界半径：4px；
-webkit边框左下半径：4px；
-webkit边框左上半径：4px；
字体大小：12px；
}
让我们添加右位置搜索字段和facebook按钮
提前感谢大家 你不想做这样的东西吗
.fl_l{
浮动：左；
}
只要替换span->div并添加float:left style就可以了，如果你不担心把它拼凑在一起的话，我想你可以随时添加float:left style
form#searchform {
display:block;
width:255px;
height:20px;
position:absolute;
float: right;
top: 28px
;
这将使它起作用，但这不是最漂亮的做事方式。你只需要添加一个
位置：相对位置绝对divbottom.search-header {
position: relative;
width: 28%;
}
form#searchform {
display:block;
width:255px;
height:20px;
position:absolute;
/*top:56px;
left:753px;*/
bottom:0;
}
只需将其添加到现有css中即可
div.topheader-row span {
float: left;
}
.topheader-row {
border: 0.1em dotted yellow;
clear: both;
overflow: hidden;
width: 100%;
}
divspandiv.topheader-row span {
float: left;
}
.topheader-row {
border: 0.1em dotted yellow;
clear: both;
overflow: hidden;
width: 100%;
}