Question

这是代码：我已经相应地对齐了代码。这是现在发生的问题，请参阅image。如何将搜索框移至最右侧，将类别下拉框移至左侧？两者都必须在同一行中对齐。

搜索CSS：

    .tfbutton {
            margin: 0;
            padding: 5px 15px;
            font-family: Arial, Helvetica, sans-serif;
            font-size:14px;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            color: #ffffff;
            border: solid 1px #0076a3; border-right:0px;
            background: #0095cd;
            background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
            background: -moz-linear-gradient(top,  #00adee,  #0078a5);
            border-top-right-radius: 5px 5px;
            border-bottom-right-radius: 5px 5px; `

＆＃34;类别＆＃34的CSS;下拉：

    <style type="text/css">

      ul {list-style: none;padding: 5px;margin: 2px;}
      ul li {display: block;position: relative;float:left;border:solid 1px #0076a3;}
      li ul {display: none;}
      ul li a {display: block;background: #ffffff;padding: 5px 10px 5px 10px;text-decoration: none;
               white-space: nowrap;color: #0076a3;border: solid 1px #0076a3;}
      ul li a:hover {background: #0095cd;}
      li:hover ul {display: block; position: absolute;}
      li:hover li {float: none;}
      li:hover a {background: #ffffff;}
      li:hover li a:hover {background: #ffffff;border: solid 1px #0076a3;}
      #drop-nav li ul li {border-top: 0px;}
    </style>

预期：类别和搜索都必须在同一行，左边的类别下拉，右下角的搜索。

Answer 1

使用CSS float: left和float: right。

Answer 2

好float: left/right似乎是最好的，但如果不起作用，请尝试

margin-left: 100%;

并将您的HTML添加到问题

如何将搜索文本框移动到最右侧，将类别下拉到html中的左侧

2 个答案: