0

我有这个例子：

<!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&quot; 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 示例中看到的那样：

演示

我试图将搜索框放在正确位置的“顶行”黄色正方形内。我尝试使用一些跨度元素将内联块与绝对位置结合起来，但没有成功......我可能忘记了要考虑的事情吗？......

在此先感谢大家！

4

6 回答 6

1

你不想做这样的事情吗？http://jsfiddle.net/9YCEP/4/

<div class="fl_l">
</div>

.fl_l {
     float: left;   
}

只需替换 span -> div 并添加 float: left 样式

于 2013-07-08T09:20:20.257 回答
0

如果您不担心将它一起破解，我猜您不是通过您的内联样式，您可以随时添加

form#searchform {
  display:block;
  width:255px;
  height:20px;
  position:absolute;
  float: right;
  top: 28px
;

这将使它工作，但这不是最漂亮的做事方式。

于 2013-07-08T09:21:22.220 回答
0

您只需要将 a 添加到其isposition:relative;的孩子的父 div 中。另外，您需要为绝对定位的. 这将定义元素相对于其父元素的定位。positionabsolutebottomdivabsolute

这是工作解决方案

编码：

.search-header {
    position: relative;
    width: 28%;
}
form#searchform {
    display:block;
    width:255px;
    height:20px;
    position:absolute;
    /*top:56px;
    left:753px;*/
    bottom:0;
}
于 2013-07-08T09:22:42.770 回答
0

只需将其添加到您现有的 css

div.topheader-row span {
  float: left;
  }
.topheader-row {
  border: 0.1em dotted yellow;
  clear: both;
  overflow: hidden;
  width: 100%;
}
于 2013-07-08T09:23:25.480 回答
0

检查这个小提琴

尝试更新这个 html div

<div class="search-header" style="margin-top: -20px; margin-left: -380px;">

于 2013-07-08T09:25:13.753 回答
0

最后我发现某处有些东西坏了，所以我采用了固定的 div，现在它更稳定了。再次感谢大家！干杯

于 2013-07-30T06:56:23.670 回答