爲什麼這些小孩子不會對齊他們父母的右側？

我試圖實現與下面設計一個簡單的用戶界面：爲什麼這些小孩子不會對齊他們父母的右側？

enter image description here

但正在以下（我加了各地各<div>邊境紅色實線，所以我可以看到格邊框，將刪除他們一旦一切都正確放置）：

enter image description here

下面是代碼：

<html> 
<head> 
    <title>Options</title> 
    <style> 
     #control-panel-div { 
      right: 0px; 
     } 
    </style>  
</head> 
<body> 
    <div id="content"> 
     <div id="option-sel-div" style="border: 1px solid red;"> 
      <select id="provider-sel"> 
       <option selected="selected" id="default">Select an option</option> 
       <option id="1">option1</option> 
       <option id="2">option2</option> 
      </select> 
     </div> 

     <div id="config-manage-div" style="border: 1px solid red;"> 
      <div id="control-panel-div" style="border: 1px solid red;"> 
       <input id="add-config-btn" type="button" value="Add"/> 

       <input id="remove-config-btn" type="button" value="Remove"/> 
      </div> 

      <div id="table-div" style="border: 1px solid red;"> 
       <div id="config-datatable"> 
        <table> 
         <tr> 
          <td> 
           Blah 
          </td> 
          <td> 
           bleh 
          </td> 
         </tr> 
         <tr> 
          <td> 
           Fizz 
          </td> 
          <td> 
           Buzz 
          </td> 
         </tr> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

我相信通過設置control-panel-div的right財產有0像素的值，那麼其所有的孩子都應該是右對齊的，但對我的生活，我不能得到這個工作（我也有嘗試text-align和box-align）。提前致謝。

來源

2012-10-09 IAmYourFaja

太多divs在我眼裏。 –

我不會使用有關表格爲此發表評論，但你可以改變你的CSS來：

#control-panel-div { 
    text-align: right; 
}

得到的效果。

jsFiddle example

來源

2012-10-09 19:01:15 j08691

正是我剛剛發佈:) –

謝謝@ j08691（+1） - 出於好奇，爲什麼'文本對齊'工作，但不是'正確'？不應該'文本對齊'只包含基於文本的元素？！？ – IAmYourFaja

'text-align'屬性適用於內聯內容，因此當您將它應用於'＃control-panel-div' div時，它會影響內容，在這種情況下，它是內聯輸入元素。欲瞭解更多信息，請訪問https://developer.mozilla.org/en-US/docs/CSS/text-align。而且，只適用於定位元素。有關更多信息，請參閱https://developer.mozilla.org/en-US/docs/CSS/right。 – j08691

嘗試

#control-panel-div { 
    float: right; 
}

這裏是文檔，如果你需要在屬性閱讀：http://www.w3schools.com/css/css_float.asp

來源

2012-10-09 19:02:12 Sashenka

這也適用，但我不認爲這完全是pnongrata正在尋找的東西。 +1替代:) –

是的，我重讀這個問題後，發現了一些我沒有正確閱讀的位。 – Sashenka

沒有太多的麻煩，並有清晰的標記：

<style type="text/css"> 
    form { 
     width: 300px; 
    } 
    fieldset { 
     float: right; 
     border: 0; 
    } 
    table { 
     clear: both; 
    } 
</style> 

<form action="index.php"> 
    <select name="the_select"> 
     <option selected="selected" id="default">Select an option</option> 
     <option id="1">option1</option> 
     <option id="2">option2</option> 
    </select> 
    <fieldset> 
     <legend>Controls</legend> 
     <button>Add</button> 
     <button>Remove</button> 
    </fieldset> 
    <table> 
     <tr> 
      <td> 
       Blah 
      </td> 
      <td> 
       bleh 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Fizz 
      </td> 
      <td> 
       Buzz 
      </td> 
     </tr> 
    </table> 

</form>

來源

2012-10-09 19:06:14

爲什麼這些小孩子不會對齊他們父母的右側？

回答

相關問題