Question

在这个小提琴中：https://jsfiddle.net/7d84Laxr/1/

<div class="textCenter">
    <div class="wrapper">
        <input type="text" class="inputNoBorder">
        <p style="display: inline-block;">/Some Text.</p>
    </div>
</div>

我只想在border-bottom和input下划线（p）。但是由于父div的宽度与窗口的宽度相同，所以它会画一条实线。

如何减小包装器div的宽度以仅包含两个元素，以便边框仅在这两个元素之下？

我不喜欢JavaScript。

Answer 1

将display:inline-block添加到父div

.textCenter{
  text-align : center;
}

.inputNoBorder{
 border: 0px;
  display: -webkit-inline-box;
  padding: 0px;
  margin: 0rem 0.2rem;
  width: 15rem; 
}

.wrapper{
  border-bottom: 1px solid;
  display: inline-block;
}

<div class="textCenter">
	<div class="wrapper">
		<input type="text" class="inputNoBorder">
		<p style="display: inline-block;">/DENSPRI, LLC.</p>
	</div>
</div>

Answer 2

添加到.wrapper

width:fit-content;
margin: 0 auto;

这样，它与输入和段落的宽度一致并且居中。请注意，包装器仍然是一个块，因此它不会与内联块可能会与另一个元素并排共享空间。顺便说一句，输入有display:inline-box，它固定为inline-block。

.textCenter {
  text-align: center;
}

.inputNoBorder {
  border: 0px;
  display: inline-block;
  padding: 0px;
  margin: 0rem 0.2rem;
  width: 15rem;
}

.wrapper {
  border-bottom: 1px solid;
  width: fit-content;
  margin: 0 auto;
}

<div class="textCenter">
  <div class="wrapper">
    <input type="text" class="inputNoBorder">
    <p style="display: inline-block;">/DENSPRI, LLC.</p>
  </div>
</div>

Answer 3

您可以通过Flex实现相同的效果，并尝试使用commented属性进行内容水平对齐

是的，请使用标签代替P标签，我认为这样也更适合您和语义。

.textCenter{
  text-align : center;
  display: flex;
  /*justify-content: flex-end; */
  /* justify-content: center; */
}

.inputNoBorder{
 border: 0px;
  display: -webkit-inline-box;
  padding: 0px;
  margin: 0rem 0.2rem;
  width: 15rem; 
}

.wrapper{
  border-bottom: 1px solid;
}

<div class="textCenter">
	<div class="wrapper">
		<input type="text" class="inputNoBorder">
		<p style="display: inline-block;">/DENSPRI, LLC.</p>
	</div>
</div>

根据子元素调整div宽度

3 个答案: