Question

我一直在尝试使用text-align:right或float:right来对齐#submit_button元素以与#outer_rim div的右边界对齐，但是远没有运气。

我该怎么做？

简而言之，我希望Add Product按钮向右移动，而不是向左移动，现在就是。

代码

＆＃13;

<!-- #add_product_form span,

#product_fieldset {
  display: inline-block;
}

#add_product_form label,
#submit_button {
  display: block
}

#add_product_form span {
  width: 530px
}

#submit_button {}

＆＃13;

<div id="outer_rim" style="display: inline-block;">
  <form action="" method="post" name="add_product_form" id="add_product_form">
    <fieldset id="product_fieldset">
      <legend>Product:</legend>
      <label><span>Some really really long description here</span>
          <input type="checkbox" value="1"></label>
      <label><span>Spare?</span>
          <input type="checkbox" value="1"></label>
    </fieldset>
    <input name="submit" type="submit" id="submit_button" value="Add&#x20;Product">
  </form>
</div>

＆＃13;

Answer 1

使用float:right是正确的，您只需将按钮包含在div中或将display:block;添加到fieldset

<!-- #add_product_form span,
#category_fieldset,
#product_fieldset,
#product_type_fieldset {
  display: inline-block;
}

#add_product_form label,
#submit_button {
  display: block
}

#add_product_form span {
  width: 530px
}

#product_fieldset {
  display: block;
  margin: 0;
}

#submit_button {
  float: right;
}

<div id="outer_rim" style="display: inline-block;">
  <form action="" method="post" name="add_product_form" id="add_product_form">
    <fieldset id="product_fieldset">
      <legend>Product:</legend>
      <label><span>Some really really long description here</span>
          <input type="checkbox" value="1"></label>
      <label><span>Spare?</span>
          <input type="checkbox" value="1"></label>
    </fieldset>

    <input name="submit" type="submit" id="submit_button" value="Add&#x20;Product">

  </form>
</div>

Answer 2

当我使用float运行代码时：右键进入提交按钮的CSS，按钮向右移动。你可能忘了添加;显示后：阻止。这将导致两行都被读为一行。

<!-- #add_product_form span,
#category_fieldset,
#product_fieldset,
#product_type_fieldset {
  display: inline-block;
}

#add_product_form label,
#submit_button {
  display: block;
  float:right;
}

#add_product_form span {
  width: 530px
}

#submit_button {}

<div id="outer_rim" style="display: inline-block;">
  <form action="" method="post" name="add_product_form" id="add_product_form">
    <fieldset id="product_fieldset">
      <legend>Product:</legend>
      <label><span>Some really really long description here</span>
                    <input type="checkbox" value="1"></label><label><span>Spare?</span>
    
                <input type="checkbox" value="1"></label>
    </fieldset>
    <input name="submit" type="submit" id="submit_button" value="Add&#x20;Product">
  </form>
</div>

Answer 3

你的意思是这样的：

<!-- #add_product_form span,
#category_fieldset,
#product_fieldset,
#product_type_fieldset {
  display: inline-block;
}

#add_product_form label,
#submit_button {
  display: block;
  float:right;
}

#add_product_form span {
  width: 530px
}

#submit_button {}

<div id="outer_rim" style="display: inline-block;">
  <form action="" method="post" name="add_product_form" id="add_product_form">
    <fieldset id="product_fieldset">
      <legend>Product:</legend>
      <label><span>Some really really long description here</span>
          <input type="checkbox" value="1"></label>
      <label><span>Spare?</span>
          <input type="checkbox" value="1"></label>
    </fieldset>
    <input name="submit" type="submit" id="submit_button" value="Add&#x20;Product">
  </form>
</div>

Answer 4

因为你正在硬编码上面元素的宽度。最简单的答案是硬编码按钮的左边距。

<!-- #add_product_form span,
#category_fieldset,
#product_fieldset,
#product_type_fieldset {
  display: inline-block;
}

#add_product_form label,
#submit_button {
  display: block
}

#add_product_form span {
  width: 530px
}

#submit_button {
    margin-left: 499px;
}

<div id="outer_rim" style="display: inline-block;">
  <form action="" method="post" name="add_product_form" id="add_product_form">
    <fieldset id="product_fieldset">
      <legend>Product:</legend>
      <label><span>Some really really long description here</span>
                    <input type="checkbox" value="1"></label><label><span>Spare?</span>
    
                <input type="checkbox" value="1"></label>
    </fieldset>
    <input name="submit" type="submit" id="submit_button" value="Add&#x20;Product">
  </form>
</div>

如何移动子元素以与外部div的右侧对齐？

4 个答案: