0
我有這樣的例子：inline-block的造型
<!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>
，你可以在此的jsfiddle例子中看到：
在那裏我試圖把搜索框裏面的「頂排「黃色在正確的位置擺放。我試圖inline-block的使用一些span元素絕對位置結合起來，但沒有成功......可我已經忘了什麼考慮？...
在此先感謝大家！
嘗試margin-top：-40px – casraf
'span'裏面的'div'不是一個有效的html – mishik
問題是 - 你的第二個span元素沒有寬度/高度，所以它會下降。簡單的嘗試設置〜20-25高度跨度或多少你想要的，它應該工作 – GoldenTabby