0

I am trying to align the two drop down boxes in the following image:

Javascript (for 1st drop down box)

//create drop-down box
            var s = $('<select/>',{id:"category"});
            $.each(data, function(key, value) {

                $('<option/>', {value: value.category, text: value.category}).appendTo(s);

            });     

            // add the category drop-down box.
            s.appendTo('#categories');

CSS:

#category
{   
text-align:center;
margin:0px auto;
display:block;
}

#categories
{   
font-family: 'underdogregular';
padding: 0px; 
margin: 0px auto;
text-align:center;
width: 280px;       
}

HTML:

<body >

    <div id='categories'>
        <h3 id ='couponCategoriesTitle'>Coupon Categories</h3>          
     </div>

    <div id = 'categorySubmitButtonDiv' >
        <!--Add Category Search Button-->
        <button class = "buttons" onclick="categorySubmit()">Search!</button>
    </div>      

</body>

I've only copied over the parts that I thought were relevant.

Would anyone know how I can get the two text boxes aligned in the middle?

Thank you for your help!

4

4 回答 4

0

只需将小代码添加到您的身体

代码：

body{
    text-align:center;
}

小提琴

于 2013-10-31T11:54:14.177 回答
0

试试这个例子

<div id="subCategory">
    <div>categories</div>
    <div>
<select >
    <option>lorem 1</option>
       <option>lorem 2</option>   
</select>
    </div>
    <input type="button"/>
</div>

CSS

#subCategory{
  text-align:center;
  margin:0 auto;
  display:inline-block;
}

小提琴

http://jsfiddle.net/bjyQk/1/

于 2013-10-31T11:45:22.257 回答
0

如果您想将文本居中放置在下拉列表中，我想到了两种可能性：

  • 使用文本缩进和调整值，但这仅适用于所选选项（可见的选项），并且不太可靠；
  • 制作自定义下拉列表，使用 ul 列表和 li 项目（例如，或您喜欢的任何其他标签）并编写自定义逻辑以显示/隐藏项目列表；这样 text-align: center 将适用于所有项目；
  • 使用可以通过 text-align: center 调整的插件；
于 2013-10-31T11:46:39.590 回答
0

将整个输入字段区域包装在 div 上text-align:center;

小提琴（包含 div 有边框，这样你就可以更好地看到发生了什么）

于 2013-10-31T12:20:04.310 回答