仅使用CSS使相邻的同级元素具有相同的宽度 [英] Make adjacent sibling elements same width using only CSS

问题描述

我很抱歉，因为出于机密原因，我无法显示正在处理的代码/图像，但是我想我可以很简单地解释它.

I'm sorry in advance because I cannot show the code/images of what I'm working on due to confidentiality reasons, however I think I can explain it quite simply.

我有一个< h1> 元素充当我的网页的标题-该标题的长度可以根据用户所在的特定页面的标题而变化，因此可以说主页"，也可以说已保存的项目"，等等.长度各不相同.

I have an <h1> element that acts as the title to my webpage - this title can change in length based on the title of the specific page the user is on, so it could say "Homepage" or it could say "Saved Projects", etc. The length varies.

< h1> 具有一个同级元素< ul> ，用作下拉菜单以导航至其他页面.

The <h1> has a sibling element, a <ul>, that acts as a dropdown to navigate to these other pages.

我的目标是使下拉菜单的大小始终与< h1> 相同.目前宽度是明确的，我尝试过自动"，但自然不起作用，现在正在寻找其他解决方法，但我认为我可以在此发布.

My goal is to make the size of the dropdown be the same size as the <h1> at all times. Currently the width is explicit, I've tried 'auto' which did not work, naturally and am looking for other workarounds now but I figured I could post here in the meantime.

我正在使用LESS，所以我知道变量很大，这可能是因为将变量传递为下拉宽度的值，但是我不知道这些变量是否可以根据< h1> 的长度是动态的.我是LESS的新手.

I am using LESS, so I know variables are big and it could be a matter of passing a variable as the value for the dropdown width, however I don't know if these variables can be dynamic based on the length of the <h1>. I am new to LESS.

我浏览了其他几条帖子，提出了类似的问题，但是没有一个得到非常可靠的解决方案.Google也不太有用，大多数文章都谈到了亲子大小或相对宽度/高度.不比较兄弟姐妹的宽度.

I've browsed a couple other posts asking a similar questions, but none have gotten a very solid solution. Google also wasn't too helpful, most articles talked about parent-child sizes or keeping width/height relative. Not comparing widths of siblings.

感谢您的帮助！

推荐答案

我试图根据您的描述进行演示(但没有透露治疗癌症的方法).不知道我是否正确理解您的意思，但这是您的追求吗? http://jsbin.com/hekimije/1/edit (jsFiddle处于关闭状态:-()

I tried to make a demo based on your description (without revealing the cure to cancer). Not sure if I understood you correctly, but is this what you are after? http://jsbin.com/hekimije/1/edit (jsFiddle is down :-( )

如果是这样，请允许我解释一下，因为实际上很简单:

If so, allow me to explain, as it is in fact quite simple:

• 在 h1 和 ul 周围添加包装器
  • 将它浮动到左边以使其宽度等于内容
  • 给它一个相对位置，以便您可以使用它来定位 ul 相对于
  • add a wrapper around your h1 and ul
    • float it left to make it take the width of its content
    • give it a position relative so you can use it to position your ul against
    • 向左和向右赋予0以使其宽度与其父级相同
    • 赋予它100％的顶部以从其父级的底部边缘开始

    此方法的确使您的ul脱离了文档流，但是对于通常需要的下拉列表来说，所以这不成问题.

    This method does lift your ul out of the document flow, but for a dropdown that is usually desirable, so it shouldn't be an issue.

    完整代码:

    HTML

      <div id='title-wrapper'>
        <h1>Some title</h1>
        <ul>
          <li>item 1</li>
          <li>item 2</li>
        </ul> 
      </div>
    

    少

    #title-wrapper {
      float: left; 
      position: relative;
    
      ul {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0; 
      }
    }
    

    jsBin中的所有其余代码只是为了使事情变得更好可见.您可以更改标题的长度，并且您会注意到ul.显然，您必须将标题悬停才能看到 ul ，毕竟这是一个下拉列表...

    All the rest of the code in the jsBin is just to make things a bit better visible. You can change the length of the title and you'll notice the ul follows. Obviously you have to hover the title to see the ul, it is a dropdown after all...

    这篇关于仅使用CSS使相邻的同级元素具有相同的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！