0

EDIT4：问题似乎已经解决了。当我在处理代码的另一部分时，组合框突然正确对齐。我不知道为什么它正常工作，但是，嘿，它有效！:DI 现在可以将此标记为已解决

我有一个表单（组合框），就在一个块分区内的一个块头分区中的一个 h1 标题旁边，它可以完美地工作。我能够使用 CSS 文件将它对齐到我想要的位置。

另一方面，我在 block_head 的底部有另一个相同放置的组合框（我的意思是，我基本上使用了相同的代码），并且 CSS 修改不会使它移动，除了浮动：左/右。

这是一些涵盖问题的代码。

结果很好的组合框：

<div class = "block">
    <div class="block_head">
        <div class="bheadl"></div>
        <div class="bheadr"></div>
        <h1>Métriques d'utilisation</h1>
    </div>
    <div class="block_content">
        <!--Bloc CLIENT X-->
        <div class="block small left">
            <div class="block_head">
                <div class="bheadl"></div>
                <div class="bheadr"></div>
                <h2>
                    Client : 
                </h2>
                <form method = "post" action="#" name = "clientForm">
                    <p>
                        <select name = "client" onchange="clientForm.submit();">
                        <?php                       
                            foreach($_SESSION['clientList'] as $client) {
                                $selected = ($client == $_SESSION['currentClient']) ? 'selected = "selected"' : '';
                                echo "<option value = $client $selected>$client</option>";
                            }
                        ?>
                        </select>
                    </p>
                </form>
            </div>
...

出现错误的组合框：

<div class = "block">
    <div class="block_head">
        <div class="bheadl"></div>
        <div class="bheadr"></div>
        <h1>Tests</h1>
        <form id="branch" class="branch" method="post" action="#">
            <p>
                <select onchange="changeBranch(this.value)">
                <?php
                    $app->branch = $this->currentBranch;

                    foreach($GLOBALS['branchList'] as $entry) {
                        $selected = ($entry == $branch) ? 'selected="selected"' : '';
                        echo "<option value=\"{$entry}\" {$selected}>{$entry}</option>\n";
                    }
                ?>
                </select>
            </p>
        </form>
        <?php
            //Afficher la sélection de la branche
            //$app->showBranchForm();
        ?>
    </div>
...

block_head 的 CSS 代码：

.block .block_head {
    height: 54px;
    line-height: 54px;
    background: url(../images/bhead.gif) 0 0 repeat-x;
    overflow: hidden;
    }

.block .block_head .bheadl {
    width: 20px;
    height: 54px;
    float: left;
    background: url(../images/bheadl.gif) top left no-repeat;
    }

.block .block_head .bheadr {
    width: 20px;
    height: 54px;
    float: right;
    background: url(../images/bheadr.gif) top right no-repeat;
    }

.block .block_head h1 {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
    color: #555;
    text-shadow: 1px 1px 0 #fff;
    float: left;
    }

.block .block_head h2 {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    color: #555;
    text-shadow: 1px 1px 0 #fff;
    float: left;
    }

.block .block_head ul {
    float: right;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
    }

.block .block_head ul li {
    display: inline;
    padding: 3px 0;
    padding-left: 20px;
    background: url(../images/phs.gif) 7px center no-repeat;
    }

.block .block_head ul li.nobg { background: none; }

.block .block_head ul li a {
    text-decoration: none;
    color: #666;
    outline: none;
    }

.block .block_head ul li.active a { color: #888; }
.block .block_head ul li a:hover { color: #008ee8; }

.block .block_head form {
    float: left;
    padding: 17px 10px;
    height: 34px;
    line-height: 24px;
    }

.block .block_head form .text {
    width: 129px;
    height: 15px;
    padding: 5px 10px 5px 25px;
    border: 0;
    font-size: 11px;
    color: #999;
    margin: 0;
    background: url(../images/srch.gif) left center no-repeat;
    }

.block .block_head form .text:focus {
    color: #666;
    background: url(../images/srch_.gif) left center no-repeat;
    }

.block .block_head select {
    text-transform: none;
    }

谁能指导我如何解决这个问题？

正如我提到的，我尝试使用 CSS 文件，但它没有做任何事情。我还尝试将表单移动到不同的 block_heads。

我会发布图片，但我需要 moar 声誉-_-'

谢谢！

编辑：有一些链接到问题的图片：

好的组合框

糟糕的组合框

EDIT2：添加了完整的 block_head CSS 代码

EDIT3：撞！

EDIT4：问题似乎已经解决了。当我在处理代码的另一部分时，组合框突然正确对齐。我不知道为什么它正常工作，但是，嘿，它有效！:D 我现在可以将此标记为已解决

4

1 回答 1

0

我本来会在评论中问这个问题，但我目前的声誉不允许我这样做:(你有没有指向这个例子的链接，因为很难理解你的问题是什么，甚至很难从工作和损坏的 CSS 集发布一个，如果你不这样做。他们都打算并排出现吗？例如

===H1=== +++组合+++

编辑：

感谢您提供额外的屏幕抓取。我认为这是因为围绕选择的“P”标签而发生的。尝试从 P 中删除边距：

.block .block_head form p {
margin: 0;
}

请参见此处的示例：

http://jsfiddle.net/XBdeL/2/

于 2013-05-10T19:48:16.163 回答