老师,你好,我想请问一下,为什么我的”列表:”和下面的列表表单隔得那么远?

老师,你好,我想请问一下,为什么我的”列表:”和下面的列表表单隔得那么远?

<!DOCTYPE html>
<html>
<head>
    <title>表单</title>
 <meta charset="utf-8">
</head>
<body>
 <form>
 <table>
  <tr>
     <td>下拉菜单:</td>
  </tr>
  <tr>
    <td>
    <select name="animal">
    <option value="xm">熊猫</option>  
    </select> 
    </td>
  </tr>

      <tr>
      <td>列表:</td>
      </tr>
      <tr>
      <td>
      <select size="3">
      <option value="pg">苹果</option>
      <option value="xj" selected>香蕉</option>
      <option value="cz">橙子</option>
      <option value="jz">橘子</option>
      </select>
      </td>
      <td>
          <table>
          <tr>
          <td>下拉菜单项:</td>
          <td>
          <select size="5" multyple>
          <option value="xm">熊猫</option>
          <option value="m">猫</option>
          <option value="g" selected>狗</option>
          <option value="z">猪</option>
          <option value="hz">猴子</option>
          <option value="n">鸟</option>
          </select>
          </td>
          <td>列表项:</td>
          <td>
          <select multyple size="5">
          <option value="pg">苹果</option>
          <option value="xj" >香蕉</option>
          <option value="cz">橙子</option>
          <option value="t" >桃</option>
          <option value="l">梨</option>
          <option value="pt">葡萄</option>
          </select>
          </td>
          </tr>
          </table>
      </td>
  </tr>
 </table>
 </form>
</body>
<html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

“列表:”和列表表单处于不同的行,而列表表单这一行的高度是由你后面同一行的高度最高的下拉列表项的列表表单高度决定的,通过给table加上border就能够明显的看出来了

小于飞飞 2018-05-21 11:19:08

你好,通过添加边框,看到效果如下:

http://img1.sycdn.imooc.com//climg/5b0238670001dd8e03900191.jpg

如果还是这样,表格单元格内容默认垂直居中,由于一行的整体高度有该行最高内容决定,所以看到效果会有一定距离。

如想实现下面效果:

http://img1.sycdn.imooc.com//climg/5b02394e00019ce604080194.jpg

可以给相应单元格设置垂直对齐方式。

http://img1.sycdn.imooc.com//climg/5b02399c0001a62404740174.jpg

在 后面 css 课程会有讲解。希望解答你的疑惑。针对解答如没有理解,建议先别点采纳,问清楚并理解后再点采纳,以避免老师和同学们会遗漏哟,加油!


  • 果然是需要按照表单格式来才可以,不然都对不齐
    2018-06-10 21:28:49
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师