动态地将元素宽度的宽度更改为固定宽度

时间:2015-05-22 08:24:47

标签: javascript jquery html css

我有一个固定宽度的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>

enter image description here

我使用固定宽度的原因是我希望div居中并且文本要对齐到左边。问题是,当文本太长时,它会包装,使选项看起来很难看。

有没有办法用jQuery或JavaScript动态更改div的宽度? (我也对CSS解决方案持开放态度,虽然我怀疑有没有)。

4 个答案:

答案 0 :(得分:1)

以小型为中心的类使用display:table; margin:auto;并删除宽度......

答案 1 :(得分:1)

使用外部和内部元素。

将外部元素的文本对齐在中心。并将内部元素显示为内联块,因此它只会与其内容一样宽。

.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(请注意我已添加了表单标记)

.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>

答案 2 :(得分:1)

如果将width属性更改为min-width属性,然后按如下所示设置width属性:

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

它应该按照您的预期行事。有关'max-content'选项的更多信息here

编辑:使用您的html结构的codepen:here

答案 3 :(得分:0)

你能不能只用min-width设置div,而不是css中的宽度,允许它像文本一样扩展?