How to make the element next to the radio button list

Y Chan 0
Viewed 42

Hi I have a asp radio button list. I need to put the drop down next to the radio button; all of them on the same row. Currently it is on the next row. Would someone help me how to fix it.

.post40
{
  font-size: 11px;
  text-align: right;
  font-weight: bold;
  padding: 2px 5px 2px 3px;
  width: 40%;
}
<table id="rdList" class="rdList" border="0">
  <tbody>
    <tr>        
      <td class="post40">Attend:</td>
      <td>
        <input id="rdList" type="radio" name="rdList" value="1" checked="checked">
        <label for="rdList_0">Yes</label>
      </td>
      <td>
        <input id="rdList_1" type="radio" name="rdList" value="0">
        <label for="rdList_1">No</label>
      </td>
    </tr>
  </tbody>
</table>

<select name="dropNo" id="dropNo" style="position:relative; right:20px;"></select>

enter image description here

asp.net css
1 Answers

The <table> is a block element, so it's taking up the full width of the parent. You can set the <table> to be inline-block so it doesn't fill the width of the parent.

Once you do that, the position: relative logic of the <select> element doesn't line up. But replacing right: 20px with top: -10px seems to line it up:

.post40
{
  font-size: 11px;
  text-align: right;
  font-weight: bold;
  padding: 2px 5px 2px 3px;
  width: 40%;
}

#rdList
{
  display: inline-block;
}

#dropNo
{
  position: relative;
  top: -10px;
}
<table id="rdList" class="rdList" border="0">
  <tbody>
    <tr>        
      <td class="post40">Attend:</td>
      <td>
        <input id="rdList" type="radio" name="rdList" value="1" checked="checked">
        <label for="rdList_0">Yes</label>
      </td>
      <td>
        <input id="rdList_1" type="radio" name="rdList" value="0">
        <label for="rdList_1">No</label>
      </td>
    </tr>
  </tbody>
</table>

<select name="dropNo" id="dropNo"></select>

For reference, an indispensable tool for debugging your CSS is the browser's element inspector. At least in Chrome, hovering over any given inspected element highlights the styling "box" in the rendered page. And selecting the element shows you the specific styling rules applied to it, which ones over-rule which others, and how the overall styling is computed. This can help you find the actual size of your element and what styling rules are making that happen. You can also make tweaks to those styling rules directly in the inspector to test them out without modifying the underlying code.

user3pn10
Related