Question

全部 -

用Google搜索并尝试了大约20分钟，但似乎无法弄清楚这一点。有谁知道为什么我不能得到搜索：在同一条线上？

我试过了显示：内联，显示：块，浮动：左/右，清除：两者，但无济于事。即使是镀铬检查员，我也无法弄清楚为什么它不能正常工作。

编辑：粘贴相关代码

<li>Search: <input type="text" name="quest_search"></li>

对应的css：

header {
    background: #f6f6f6;
    height: 58px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 60px;
}
    /* Social Links */
    header aside ul {
        padding-top: 18px;
    }
    /* Main Navigation */
    header .select-menu { display: none; }
    header nav { position: relative; }
    header nav ul {
        list-style: none;
        float: right;
        padding: 22px 0px 0px 0px;
    }
        header nav ul li {
            float: left;
            margin-left: 30px;
            position: relative;
        }       
            header nav ul li a{
                color: #b5b5b5;
                font-size: 12px;
                -webkit-transition:color 0.2s ease-in;  
            -moz-transition:color 0.2s ease-in;  
            -o-transition:color 0.2s ease-in;  
            transition:color 0.2s ease-in;
            }
            header nav ul li a:hover { color: #777; }
            header nav ul li.current a{ color: #555; font-weight: bold; }
            header nav span.arrow {
                width: 24px;
                height: 13px;
                background: url('../images/light-nav_arrow.png') no-repeat;
                display: none;
                position: absolute;
                top: 58px;
            }

http://dump.tanaris4.com/so/cfs.html

提前致谢！

Answer 1

您的问题是input中的base.css的{{1}}为{100}。这意味着width的宽度将始终是其父元素大小的100％，其中还包含“search：”文本。将此更改为低于100％的值，它应该可以正常工作。

例如：

input

当然，input[type="password"], input[type="text"], input[type="email"] { width: 50%; }只是您可以使用的一个示例。 width:50%和其他特定宽度将起作用。只需玩弄它，看看什么最适合你。

Answer 2

您的base.css文件正在为input提供width: 100%;。尝试给它一个width: auto

Answer 3

CSS：

input[name="quest_search"]{
    width: auto;
}

Answer 4

只需将“搜索：”放入其自己的<li>即可，只需一个简单的快速修复。

CSS - 无法在同一行上获取输入文本和链接

4 个答案: