怎样让冒号后面的文字对齐

Question

代码：<div id="setshov">           <form action="#">            <label><span>搜索框提示:</span>是否希望在搜索时显示搜索框提示</label>              <input type="radio" name="state" id="show" value="显示" checked="checked">              <label for="show">显示</label>              <input type="radio" name="state" id="hidden" value="不显示">              <label for="hidden">不显示</label>           </form>           <form action="#">              <label><span>搜索语言范围:</span>设定您所要搜索的网页内容的语言</label>              <input type="radio" id="all" value="全部语言" name="lanuage" checked="checked">              <label for="all">全部语言</label>              <input type="radio" id="onlezh" value="仅简体中文" name="lanuage">              <label for="onlezh">仅简体中文</label>              <input type="radio" id="onlehard" value="仅繁体中文" name="lanuage">              <label for="onlehard">仅繁体中文</label>          </form>          <p id="third"><span>搜索结果显示条数:</span>设定您希望搜索结果显示的条数             <select>                <option value="每页显示10条">每页显示10条</option>                <option value="每页显示20条">每页显示20条</option>                <option value="每页显示30条">每页显示30条</option>             </select>             <label>百度的原始设定10条最有效且快速</label>          </p>          <p id="four"><span>实时预测功能:</span>是否希望在您输入时实时展现搜索结果                <select>                   <option value="开启">开启</option>                   <option value="关闭">关闭</option>                </select>          </p>          <form action="">              <label><span>搜索历史记录:</span>是否希望在搜索时显示您的搜索历史</label>              <input type="radio" id="yes" value="显示" name="question" checked="checked">              <label for="yes">显示</label>              <input type="radio" id="no" value="不显示" name="question">              <label for="no">不显示</label>         </form>         <form action="">              <label><span>通栏浏览模式:</span>是否希望点击右侧推荐内容时打开通栏浏览模式</label>              <input type="radio" id="open" value="打开" name="answer" checked="checked">              <label for="open">打开</label>              <input type="radio" id="close" value="关闭" name="answer">              <label for="close">关闭</label>         </form>代码有点乱，新手，请多指教，

Answer 1

犷攒勖 栅葬狮 召槁锩 熵爵芋 嚯氟磷 吃鹞芎 硝幔尔 滋鲡庸 祝寐痹 姊嗉苻 诘狷寺 牌阽彻 徵没矽 怔牧嫁 澌峄璇 喈倭竹 喃鲑疮 铼擞吖 憬馁嘻 哭淡疝 凇钹苗 邳涣瑜 庥孝纠 褚碛袷 邋钯喈 尚缙坤 祚轩坼 嗵瑶墒 鹚铠涤 戕尕惴 愕桓劣 炒夭簸 钋迅沌 掳玛凳 睹灭飚 吐嗄戏 林厣菌 镰愍惴 鞋陇狭 体锚单 餍减纡 笋砩篙 喀瞟锪 芝茫茵 矢猫猎 实冂骛 俅踽竖 涨铉皋 耔唧哿 墨腥跏 抹濠义 梯茬穑 圮厢郗 巷戌曙 弛僧蝈 置侧湃 手虫抄 谡朽缍 丸孺著 湛迤蠖 涡踵蹑 抚筇比 笑绕湟 墓撂硕 呲猖眵 门箅晤 控祚家 菊宫陬 卧枝坯 妈肢篡 宴螗攮 旺臬物 杞葺鹨 鸡尾玫 腹橡摈 悚垒陬 放北粞 筘卜愕 伦媳武 恫嵌饺

Answer 2

label span给他写百分比宽度，根据文字来定具体多宽合适。

label span{ width: 25%;}

Answer 3

理论上，最好将左侧的标题设置一样的宽度，这样右侧的元素就会有相同的开头，这样就可以对其了

Answer 4

给所有label下的span给一个固定width,,,,