css 为什么窗体标签换行？

webghufk 于 2023-03-14 发布在其他

关注(0)|答案(3)|浏览(146)

附件是一个网页的最小的例子，我的工作。我的目标是有表单标签采取完全的宽度，他们需要能够显示文本没有换行，并且DIV的300px宽度的其余部分由图像占据（比300px大得多）。我很难理解为什么表单的宽度看起来是任意的，我真的很想知道这是如何工作的。

div {
  display: flex;
  flex-direction: row;
  max-width: 300px;
}

img {
  width: 100%;
}

form {
  width: 100%;
  padding: 10px;
}

<div>
  <img src="https://i.stack.imgur.com/aH5zB.jpg" alt="" srcset="" />
  <form action="/create-checkout-session" method="POST">
    <fieldset>
      <legend>Fruit</legend>
      <div>
        <input type="radio" id="red" name="top" value="red" checked />
        <label for="red">Red</label>
      </div>
      <div>
        <input type="radio" id="blue" name="top" value="blue" checked />
        <label for="blue">
          BlueBlueBlueBlueBlueBlueBlueBlue 
          BlueBlueBlueBlueBlueBlueBlueBlueBlueBlueBlue
        </label>
      </div>
      <div>
        <input type="radio" id="green" name="top" value="green" checked />
        <label for="green">GreenGreenGreenGreenGreenGreenGreen</label>
      </div>
    </fieldset>
    <fieldset>
      <legend>Veg</legend>
      <div>
        <input type="radio" id="red2" name="top" value="red" checked />
        <label for="red2">Red</label>
      </div>
      <div>
        <input type="radio" id="blue2" name="top" value="blue" checked />
        <label for="blue2">
          BlueBlueBlueBlueBlueBlueBlueBlue
          BlueBlueBlue BlueBlueBlueBlueBlueBlueBlueBlue
        </label>
      </div>
      <div>
        <input type="radio" id="green2" name="top" value="green" checked />
        <label for="green2">GreenGreenGreenGreenGreenGreenGreen</label>
      </div>
    </fieldset>
    <input type="submit" name="checkout" value="Checkout" />
  </form>
</div>

css

来源：https://stackoverflow.com/questions/75699506/why-are-form-labels-wrapping

3条答案

按热度按时间

4c8rllxm1#

至少可以使用下面的代码轻松地停止 Package ：

label {
  white-space: nowrap;
}

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-03-14

cclgggtu2#

form {
  max-width: 300px;
  margin: 0 auto;
}

.wrap {
  width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<form action="/create-checkout-session" method="POST">
    <fieldset>
      <legend>Color</legend>
      <div class="wrap">
        <input type="radio" id="red" name="top" value="red" checked />
        <label for="red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus ipsum erat, eu convallis odio accumsan a. Proin faucibus, quam non bibendum scelerisque, mi eros aliquam nisl, et porttitor mi mi ut ligula. Etiam id nisi enim.</label>
      </div>
    </fieldset>
    <input type="submit" name="checkout" value="Checkout" />
  </form>

这样就行了，别忘了定义一个固定的宽度，或者一个最大宽度。
您可以使用任何东西来代替fieldset。

fields {
      width: 300px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

赞(0）回复(0）举报 2023-03-14

zc0qhyus3#

这应该能达到你想要的效果。简单的容器DIV使用显示“表格行”和两个“表格单元格”内容div。表单内容设置为不换行，图像内容将根据剩余的可用宽度自动调整大小。

#main-content {
        display: table-row;
        max-width: 100vw;
    }
    #img-content {
        display: table-cell;
        width: auto;
        vertical-align: middle;
    }
    #img-content img {
        max-width: 100%;
    }

    #form-content {
        display: table-cell;;
        padding: 10px;
        white-space: nowrap;
        vertical-align: middle;
        
    }

<div id="main-content">
  <div id="img-content">
    <img src="https://i.stack.imgur.com/aH5zB.jpg" alt="" srcset="" />
  </div>
  <div id="form-content">
    <form action="/create-checkout-session" method="POST">
      <fieldset>
        <legend>Fruit</legend>
        <div>
          <input type="radio" id="red" name="top" value="red" checked />
          <label for="red">Red</label>
        </div>
        <div>
          <input type="radio" id="blue" name="top" value="blue" checked />
          <label for="blue">
              BlueBlueBlueBlueBlueBlueBlueBlue 
              BlueBlueBlueBlueBlueBlueBlueBlueBlueBlueBlue
            </label>
        </div>
        <div>
          <input type="radio" id="green" name="top" value="green" checked />
          <label for="green">GreenGreenGreenGreenGreenGreenGreen</label>
        </div>
      </fieldset>
      <fieldset>
        <legend>Veg</legend>
        <div>
          <input type="radio" id="red2" name="top" value="red" checked />
          <label for="red2">Red</label>
        </div>
        <div>
          <input type="radio" id="blue2" name="top" value="blue" checked />
          <label for="blue2">
              BlueBlueBlueBlueBlueBlueBlueBlue
              BlueBlueBlue BlueBlueBlueBlueBlueBlueBlueBlue
            </label>
        </div>
        <div>
          <input type="radio" id="green2" name="top" value="green" checked />
          <label for="green2">GreenGreenGreenGreenGreenGreenGreen</label>
        </div>
      </fieldset>
      <input type="submit" name="checkout" value="Checkout" />
    </form>
  </div>
</div>

赞(0）回复(0）举报 2023-03-14

我来回答

css 为什么窗体标签换行？

3条答案

相关问题

热门标签

最新问答