動態將元素寬度的寬度更改為固定寬度

Question

我有一個固定寬度的div寬度：

// CSS

@media only screen
.column.small-centered:last-child, .columns.small-centered:last-child {
  float: none;
}
.lesson_lt_mc_div .small-centered {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 296px;
}
foundation.css:1@media only screen
.column.small-centered, .columns.small-centered {
  margin-left: auto;
  margin-right: auto;
  float: none;
}
.text-left {
  text-align: left !important;
}

// HTML

<div class="small-3 small-centered text-left columns">
    <input type="radio" name="lt_mc_ans" value="1" id="lt_mc_ans_1"><span> 1. </span>
    <label for="lt_mc_ans_1">I</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="2" id="lt_mc_ans_2"><span> 2. </span>
    <label for="lt_mc_ans_2">rsr rs rsrs rsrs r rrrs</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="3" id="lt_mc_ans_3"><span> 3. </span>
    <label for="lt_mc_ans_3">Very</label>
    <br>
    <input type="radio" name="lt_mc_ans" value="4" id="lt_mc_ans_4"><span> 4. </span>
    <label for="lt_mc_ans_4">She</label>
</div>

我使用固定寬度的原因是我希望div居中並且文本要向左對齊。 問題是，當文本太長時會自動換行，從而使選項看起來很難看。

有沒有一種方法可以使用jQuery或JavaScript動態更改div的寬度？ （盡管我懷疑有任何解決方案，但我也對CSS解決方案持開放態度）。

Answer 1

USE display:table; margin:auto; display:table; margin:auto; 在小中心類上並刪除寬度...

Answer 2

使用內部和外部元素。

將外部元素的文本居中對齊。 並將內部元素顯示為行內塊，因此它的寬度僅取決於其內容。

 .outer { text-align: center; background: lightblue; } .inner { background: lightgreen; display: inline-block; text-align: left; } 

 <div class="outer"> <div class="inner"> Some text in it <br />and some more <br/>and more </div> </div> 

注意：您可以使用表格...（為您節省一個元素），而不是使用內部div。

編輯

使用您的HTML（請注意，我已經添加了form標簽）

 .outer { text-align: center; background: lightblue; } .inner { background: lightgreen; display: inline-block; text-align: left; } 

 <div class="outer small-3 small-centered text-left columns"> <form class="inner"> <input type="radio" name="lt_mc_ans" value="1" id="lt_mc_ans_1"><span> 1. </span> <label for="lt_mc_ans_1">I</label> <br> <input type="radio" name="lt_mc_ans" value="2" id="lt_mc_ans_2"><span> 2. </span> <label for="lt_mc_ans_2">rsr rs rsrs rsrs r rrrs</label> <br> <input type="radio" name="lt_mc_ans" value="3" id="lt_mc_ans_3"><span> 3. </span> <label for="lt_mc_ans_3">Very</label> <br> <input type="radio" name="lt_mc_ans" value="4" id="lt_mc_ans_4"><span> 4. </span> <label for="lt_mc_ans_4">She</label> </form> </div> 

Answer 3

如果將width屬性更改為min-width屬性，然后按如下所示設置width屬性：

width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;

它應該表現出預期的效果。 有關“最大內容”選項的更多信息，請點擊此處 。

編輯：使用您的html結構的codepen： 此處

Answer 4

您是否不僅可以將div設置為min-width，還可以將CSS的寬度設置為允許文本擴展的最小寬度？