CSS:使用宽度百分比定位子表

本文关键字：百分比 定位 CSS | 更新日期: 2023-09-27 18:15:36

页面内容，CSS样式表

当您访问页面内容链接时，使用下面的示例代码并提交它。您将注意到子表source_code没有一直向右伸展。如果我将width: 100%添加到syntax_table类，它解决了问题，但source_code表向右对齐，我不能使它向左移动。

我花了大约两个小时来修理它，我现在需要一些帮助。

下面是一些c#示例代码: 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
namespace Test1
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
        /// <summary>
        /// Calculate method.
        /// </summary>
        /// <param name="sender">Sender</param>
        /// <param name="e">Event Arguments</param>
        private void btnCalculate_Click(object sender, RoutedEventArgs e)
        {
            double weight;
            int heightf, heighti;
            Double.TryParse(this.txtWeight.Text, out weight);
            Int32.TryParse(this.txtHeightF.Text, out heightf);
            Int32.TryParse(this.txtHeightI.Text, out heighti);
            if (!(heightf >= 1))
                MessageBox.Show("A person is at least 1 foot tall.");
            else if (!(weight >= 1.0))
                MessageBox.Show("A person cannot weigh nothing.");
            else if (heightf >= 12)
                MessageBox.Show("A person is not taller than 12 feet.");
            else
            {
                double kg = weight * 0.45359237;
                int height = heighti + (heightf * 12);
                double bmi = weight / (height * height) * 703;
                double gbmi = Math.Round(bmi, 1);
                this.txtBMI.Text = bmi.ToString("n1");
            }
        }
    }
}

CSS:使用宽度百分比定位子表

这是因为.syntax_table上的2个表格单元格是自行调整大小的，浏览器将根据大小进行猜测。您至少需要为包含line_numbers

的表格单元格设置一个宽度
<table class="syntax_table">
     <tr>
           <td class="lines"><table class="line_numbers">...</table></td>
           <td><table class="source_code">...</table></td>
     </tr>
</table>

风格
.source_code { width: 100%; } // add this to give source_code full width of it's cell
.lines { width: 50px } // or set to a percentage, then .code should take up the rest
相关文章：