Question

如何使用单选按钮标签设置样式，使它们与搜索框和“定位”按钮位于同一行？我还要设置文本框值的样式＆＃34;输入地址....＆＃34;谢谢！

CSS

   .reportText_font {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-style: normal;
        color: #333;    
    }
   form {
        display: inline;
      }
   #searchArea {
        margin-left:35px;
        height: 22px;
      }

HTML

<div id = "searchArea">
        <input id ="address" size="38" style="color:#333" value="Enter address (including state) or ZIP code" onfocus="if(this.value==this.defaultValue) this.value='';"/>
        <button id="locate" data-dojo-type="dijit/form/Button">Locate</button> 
        <form>
           <input type="radio" name="template" value="1" id="res" checked>Residential
            <input type="radio" name="template" value="2" id="com">Commercial
        </form>
</div>

http://jsfiddle.net/6fRkc/3/

Answer 1

你想要做的是专门按照以下方式定位单选按钮：

 input[type="radio"]

当然，您需要更具体，因为不要选择每个单选按钮。将其垂直对齐到顶部，然后在顶部应用边距以将其下拉到您需要的位置。这将保留所有其他文本，只移动单选按钮。

Answer 2

将white-space: nowrap添加到外部容器的选择器应该使所有内容都在同一行。

#searchArea {
    margin-left:35px;
    height: 22px;
    white-space: nowrap;
}

Answer 3

我让这个用于单选按钮标签。

CSS

label[for=res], label[for=com]{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #333;
}


<form>
        <input type="radio" name="template" value="1" id="res" checked>
        <label for="res">Residential</label>&nbsp;&nbsp;
        <input type="radio" name="template" value="2" id="com">
        <label for="com">Commercial</label>
    </form>

Answer 4

将<input>...</input>行包含在：

中

<span class="reportText_font"></span>

样式在表单里面的单选按钮标签

4 个答案: