Question

您好，

我想使用css3样式创建自己的选择框。我正在使用1个输入字段和一个向下箭头。总选择框位于1个外部div中，图像位于内部标记中。我必须将该向下箭头定位到最右边的外部div，以便它看起来像选择框.I在对齐该图像时遇到问题。我可以通过为内部和外部标签设置position：absolute来定位该标签。如果我不将position：absolute放到外部div标签，则内部div标签位置不正确..（我不知道......为什么？）。

但问题是，如果我这样做，我必须为每个选择框指定left和top（手动对齐）。如果我在申请表中有更多的选择框，那么很难做到这一点。（事实上，它令人作呕......）..所以内部div标签必须与外部标签最正对，而不需要定位外部div标签....我希望我清楚......请帮助解决这个问题..

这是我的示例代码....

<!DOCTYPE HTML>
<html>
 <head>
  <style>
   #Outer{ width:155px; height:20px;    *position:absolute;     border:1px solid #336633;   }
   #In{    position:absolute;   right:0px;  height:100%;    width:10px; background:red; top:0px;   }
  </style>
 </head>

 <body>
    <div id="Outer">
       <input type="text"/>
       <div id="In">^</div>
   </div>

 </body>
</html>

Answer 1

我认为以下代码符合您的目的。

<head>

    <style>

        #Outer{    

            float:left;    
            width:200px;    
            height:20px;    
            border:1px solid #336633;   
        }

        #In{    
            float:left; 
            height:100%;    
            width:10px; 
            background:red; 
        }

    </style>

</head>

<body>

<div id="Outer">

    <div style="float:left"><input type="text"/></div>

    <div id="In">^</div>

</div>

</body>

在上面的代码中，我为你的输入元素添加了一个div，并在外部和内部div中添加了float样式。另外，你的宽度应该超过155px，我用它作为200px。

请告诉我它是否有效或您是否想要其他任何内容。

在父div中定位内部div

1 个答案: