1

嘿伙计们，我目前正试图将一个文本框、一个选择菜单和一个按钮干净地放入一个大小的 div 中，但我遇到了一个问题，即每个元素都有奇怪的边框/边距，这会阻止它正确呈现（按钮出现在文本框下方和选择菜单）

这是我目前使用的 html

<div class="content">
    <div class="search-panel">
        <div class="search-panel-logo">
            <img src="img.png" class="search-panel-logo-img" />
        </div>

        <div class="search-panel-searchbar">
            <form class="search-panel-frm" action="" id="fsearchbar">
                <input class="search-panel-frm" type="text" id="tseachtext" name="tsearchtext" value="Search" />
                <select class="search-panel-frm" id="ssearchselect" name="ssearchselect">
                    <option value="Cars">Cars</option> 
                </select>
                <input class="search-panel-frm" type="button" id="bsearchgo" name="bsearchgo" value="Search!" />
            </form>

        </div>
    </div>
</div>

继承人的CSS：

.content {
    background:inherit;
    width:950px;
    height:600px;
    margin: 0 auto;
}

.search-panel {
    width:inherit;
    height:500px;
    background:#093;
    margin:0 auto;

}
.search-panel-searchbar {
    width:inherit;
    height:30px;

}

.search-panel-searchbar-frm {
    width:inherit;
    height:inherit;

}

.search-panel-searchbar-frm-text {
    width:60%;
    height:70%;

}

.search-panel-searchbar-frm-select {
    width:20%;
    height:80%;

}

.search-panel-searchbar-frm-go {
    width:20%;
    height:80%;

}

知道我可以添加什么以使所有元素出现在一行而不是两行中，我已经尝试过

border:0;
margin:0;

它没有解决问题。

4

3 回答 3

0

删除元素之间的空格。

此外，使用width: inherit可能不是一个好主意 - 尝试width: 100%替代或类似的东西。height: inherit可以替换为height: auto;（或省略）。

于 2012-05-19T19:39:09.663 回答
0
  1. 您发布了一些不适用于您发布的 HTML 的 CSS 类（例如.search-panel-searchbar-frm-go）
  2. 您正在将类 search-panel-frm 应用于表单元素以及表单中的元素。你确定这是你想要的吗？
  3. 我没有看到同样的问题：输入、选择和输入：按钮对我来说都出现在同一行。

您可以尝试添加这个简单的修复程序以将所有内容保持在一条线上，这可能会给您一些想法。

.search-panel-frm *
{
 white-space:nowrap;
}

如果您的所有元素都已经在同一行，并且您希望它们更好地排列，请尝试不同的垂直对齐值，例如：

.search-panel-frm *
{
 vertical-align:top;
}
于 2012-05-19T23:21:36.123 回答
0

为了实现您的目标，必须应用一些 CSS 技巧，请参见下面的 CSS：

CSS

/* wrapper */
.search-panel-searchbar {
    width: 100%;
    height: 30px;
    overflow: hidden;
}

/* form elements must be wrapped and not a direct child of the form tag */
.search-panel-searchbar > form > div {
    background-color: #fff;
    width: 100%;
    height:30px;
}

/* input[type="text"] */
.search-panel-searchbar-frm-text {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 16px;
    height: 16px;  /* necessary to fix height issue on windows browsers */
    padding: 6px 0;
    display: block;
    border: 1px solid #ccc;
    background-color:#fff;
    width: 60%;
    text-indent: 4px;
    float: left;
}

/* select */
.search-panel-searchbar-frm-select {
    margin: 0;
    padding: 0;
    font-size: 12px;
    height: 30px;
    padding: 6px 4px;
    display: block;
    border: 1px solid #ccc;
    background-color:#fff;
    width: 20%;
    float: left;
    margin-left:-1px; /* pull to prevent border overflow issue with % */
}

/* input[type="button"] */
.search-panel-searchbar-frm-go {
    margin: 0;
    padding: 0;
    font-size: 12px;
    height: 30px;
    padding: 6px 0;
    display: block;
    border: 1px solid #ccc;
    background-color:#fff;
    width: 20%;
    float: left;
    text-align:center;
    margin-left:-1px; /* pull to prevent border overflow issue with % */
    cursor: pointer;
}

笔记：

CSS 不包括 Fiddle 示例中为视觉演示提供的样式，例如按钮悬停和正文背景。

请注意，不幸的是，每个浏览器（和操作系统！）都select以不同的方式处理，并且很可能在一两个浏览器上，样式可能会有所不同。

工作小提琴的例子！

在此处输入图像描述

屏幕截图与以下测试相匹配：

Linux Ubuntu 12.04

  • 火狐12.0
  • Chromium 18.0.1025.151（开发人员内部版本 130497 Linux）

Windows XP 专业版 2002 Service Pack 3

  • 互联网浏览器 8.0.6001.18702
  • 歌剧 11.62
  • 火狐 3.6.16
  • Safari 5.1.2 （仅选择框高失败）
  • 谷歌浏览器 18.0.1025.168 m
  • K-Meleon 1.5.4 （由于字体系列而失败）

Windows 7 家庭版服务包 1

  • Internet Explorer 9.0.8112.164211C
  • 歌剧 11.62
  • 火狐12.0
  • Safari 5.1.4
  • 谷歌浏览器 18.0.1025.168 m

您将font-family使用的必须在末尾包含字体系列声明，以防止出现行高和文本大小问题。例如，font-family: Helvetica, Arial, sans-serif

于 2012-05-20T01:39:58.223 回答