html - 在父 div 中定位内部 div

标签 html css positioning

你好,

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

但问题是,如果我这样设置,我必须为每个选择框指定左侧和顶部(手动对齐)。如果我的申请表中有多个选择框,很难做到这一点。 (事实上​​ ,它令人作呕......)..所以内部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>

最佳答案

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

<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。

请告诉我它是否有效,或者您还想要其他任何东西。

关于html - 在父 div 中定位内部 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9723204/

相关文章:

javascript - 获取 div 标签的特殊属性的值

jquery - 比较 2 个表的值并突出显示不同的行

html - 如何居中:after in a div?

javascript - 如何通过操纵最高值来提升所有元素?

javascript - Div/CSS 位置在 javascript 操作后不更新

css - 上移内联显示的字符

c# - 在 C# 的 RichTextBox 中使用 HTML 标签

html - 因未知原因添加额外 margin

css - 无序列表菜单中不需要的边框

internet-explorer - 背景大小 :cover; alternative for IE6+