Question

目前我有一个最大宽度为200px的div，在div中有一些带有属性white-space的跨度：nowrap和display：inline-block。

.a {
  max-width:200px;
}

.b {
 display: inline-block; 
 white-space:nowrap;
}

<div class="a">
 <span class="b">A</span> <span class="b">B</span>
 <span class="b">C</span>
</div>

当前行为是当跨度A和跨度B的长度超过div的最大宽度时，跨度B被包裹到下一行。

<div class="a">
 <span class="b">A</span> Empty space here
 <span class="b">B</span> Empty space here
 <span class="b">C</span> Empty space here
</div>

但是，div的宽度不会根据跨度的长度调整大小。它总是具有200px的宽度，这导致跨度后存在空白空间的问题。

我想要的是确保div按照跨度的长度调整大小，没有任何空白区域。

任何人都可以帮我这个吗？我不是直接要求答案。一些解释会更好。

Answer 1

使用max-width不允许div宽于给定值（在这种情况下为200px）使用min-width代替max-width可能对您有帮助......

Answer 2

public void Web_Login_ShouldValidateUserAndLoginSuccessfully()
    {
        using (var kernel = new NSubstituteMockingKernel())
        {
            // Setup the dependency incjection
            kernel.Load(new EntityFrameworkTestingNSubstituteModule());

            // Create test request data 
            var request = new LogInRequest { UserName = "test", Password = "test" };

            var fakeResponseHandler = new FakeResponseHandler();
            fakeResponseHandler.AddFakeResponse(new Uri("http://localhost/test"), new HttpResponseMessage(HttpStatusCode.OK));
            ConfigurationManager.AppSettings["SearchApiBaseUrl"] = "http://dev.loans.carfinance.com/internal";
            var server = new HttpServer(new HttpConfiguration(), fakeResponseHandler);
            var httpClient = new HttpClient(server);
            var controller = new LoanDriverController(httpClient);
            controller.CookieManager=mockOfYourCookieManager; //here you pass the instance of the mock or also you can passe it in the constructor of the controller.
            Fake.SetFakeContext(controller);
            var result = controller.Login(request);
            Assert.IsNotNull(result);
        }

你可以强迫A＆amp; B就像这样在同一条线上，不是很优雅，我建议使用一个列/网格框架来更容易地控制这些类型的元素。

如果你的内容超过100px

，你可能必须决定如何处理overflow-x

你可以试试flexbox（作为奖励试图为你处理额外的空白）：

.a {
  max-width:200px;
}

.b {
 display: inline-block; 
}
.c {
 white-space:nowrap;
}

<div class="a">
  <div class="c">
   <span class="b">A</span> <span class="b">B</span>
  </div>
  <span class="b">C</span>
</div>

Answer 3

.a {
  max-width:200px;
}

#sameline {
display:inline-block;
 white-space:nowrap;
}

<div class="a">
   <div id=sameline>
 <span class="b">A</span> Empty space here
 <span class="b">B</span> Empty space here
 <span class="b">C</span> Empty space here
    </div>
</div>

Answer 4

据我了解，您的问题似乎是display: inline-block;上的<span> ...尝试删除此样式并使用默认值，该值应为display: inline; ... < / p>

虽然跨度以内联形式运行，但它也以块形式运行，这意味着当它的父节点上没有更多可用宽度时它会崩溃，从而产生所述空白空间。

修改

忘记提及...另外，删除white-space: nowrap; ...

Answer 5

.a{
max-width:200px; 
margin:5px; 
display:inline-block; 
white-space:nowrap; 
 }

<div class="a"> 
<span class="b">A</span> Empty space here 
<span class="b">B</span> Empty space here
<span class="b">C</span> Empty space here
</div>

Answer 6

在类a中，white-space默认是正常的，浏览器忽略空格，你可以添加边框来看！

当div中的span被包裹时，如何调整div的大小？

6 个答案: