Question

我希望能够使用最大宽度并且仍然适合文本框的宽度。正如您在下面的示例中看到的那样，框宽度比文本宽。

问题是，我希望文本居中，但在对齐的情况下，在黑色标记下，如您在代码段中看到的那样。

仅使用display:inline进行了尝试，但似乎我无法在该选项中使用max-width。

＆＃13;

.box {
  max-width:130px;
  background-color:#f00;
  display:inline-block;
  position:relative;
  border-top: 3px solid #000;
}
.box:before {
  content: "";
  width: 4px;
  height: 8px;
  background-color: black;
  position: absolute;
  top: -10px;
  left: calc(50% - (4px / 2));
 }

＆＃13;

<div class="box">abcdefghijk abcdefghijk<div>

＆＃13;

Answer 1

您的内容abcdefghijk abcdefghijk超过130像素，因此您的div显示为130并导致内容自动换行。

尝试在内容abcdefghijk <br/> abcdefghijk中添加中断，您的div将显示小于130.

Answer 2

三个步骤：

将文字放在段落
给段落display inline-block
为text-align center

inline-block

.box { display: inline-block; position: relative; max-width: 130px; text-align: center; background-color: #f00; border: 2px solid #000; } p { margin: 2px; display: inline-block; }段落将在框内居中。

工作示例：

＆＃13;

<div class="box">
<p>abcdefghijk abcdefghijk</p>
<div>

＆＃13;

SELECT p.name 
FROM account a
  INNER JOIN product p ON a.prodid = p.prodid

＆＃13;

Answer 3

如果<div>带有text-align:center;，则其中的任何文本都将相对于该容器元素的宽度居中。为此目的，内联块元素被视为文本，因此它们也将居中。

<div class="box">
<p>
abcdefghijk abcdefghijk
</p>
</div>

.box {
  max-width:130px;
  background-color:#f00;
  text-align:center;
  position:relative;
  border-top: 3px solid #000;
}
.box:before {
  content: "";
  width: 4px;
  height: 8px;
  background-color: black;
  position: absolute;
  top: -10px;
  left: calc(50% - (4px / 2));
 }

 p {
   margin: 0;
   display: inline-block;
 }

示例：

https://jsfiddle.net/epe7caaL/

将div宽度调整为文本仍然使用max-width？

3 个答案: