javascript - 使绝对定位按钮的宽度与其内容相同

Question

我有浮动按钮，我希望它们的宽度与它们的内容一样宽。内容可能有几行长。

我已经尝试了很多东西，但似乎没有任何效果。任何想法如何实现这一目标？

$('button').css('width', $('button span').outerWidth() + 'px')

$.each($('button'), (i, v) => {
  $(v).css('width', $(v).find('span').outerWidth() + 'px');
  $(v).css('top', i*100 + 'px');
});

section {
  position: relative;
  width: 300px;
}

button {
  position: absolute;
  padding: 0;
  text-align: left;
}

span { background: lightcoral; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>

  <button>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis iure nostrum dicta cumque. Nisi facilis corporis hic, pariatur molestiae error distinctio architecto quas itaque deserunt aliquam quo molestias dolor ex!</span>
  </button>

  <button>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
  </button>

  <button>
    <span>Lorem ipsum dolor sit amet.</span>
  </button>

  <button>
    <span>Lorem.</span>
  </button>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>

</section>

标签： javascriptjquerycss

Answer 1

您需要考虑边框，因此添加box-sizing: content-box;并添加1px到最终宽度（我正在寻找原因...）

$.each($('button'), (i, v) => {
  $(v).css('width', ($(v).find('span').outerWidth() + 1) + 'px');
  $(v).css('top', i * 100 + 'px');
});

section {
  position: relative;
  width: 300px;
}

button {
  position: absolute;
  box-sizing: content-box;
  padding: 0;
  text-align: left;
}

span {
  background: lightcoral;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>

  <button>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis iure nostrum dicta cumque. Nisi facilis corporis hic, pariatur molestiae error distinctio architecto quas itaque deserunt aliquam quo molestias dolor ex!</span>
  </button>

  <button>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
  </button>

  <button>
    <span>Lorem ipsum dolor sit amet.</span>
  </button>

  <button>
    <span>Lorem.</span>
  </button>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>

</section>