如何创建带有实线边框的元素网格?

时间:2019-03-05 16:34:48

标签: html css

我需要使div带有实心边框。我有一个良好的开端,但是在正确对齐和使线路正常工作时遇到了一些麻烦。下面是请求的HTML的图片

Word Doc Image

到目前为止,我认为我的HTML与我很接近,但是我的两条最上面的行不匹配,我无法获得垂直线。

代码:

<div style="width:60%;border:solid">
		<div style="width:45%; display: inline-block;">
			<div style="margin-left:5px;">
				Domestic Shipping and Handling<br>
				<hr style="width: 5px;"/><br>
				$25..01 to $50.00..add $7.95 <br>
				$50.01 to $75.00...add $11.95 <br>
				$75.01 to $100.00...add $13.95 <br>
				$100.01 to $150.00...add $17.95 <br>
				$150.01 to $200.00 .. add $19.95 <br>
				200.01 &#8211; above.. add $23.95
			</div>
		</div>
		<div style="width: 8%; display: inline-block;"><hr style="width: 1px; height: 100px;"></div>  
		<div style="width:45%; display: inline-block;">
			Canada, AK, HI, PR Shipping and Handling<br>
			<hr style="width: 5px;"/><br>
			$.01-$25.00.. add $14.95<br>
			$25.01 - $50.00.add $15.95<br>
			$50.01 to $75.00...add $18..95<br>
			$75.01 to $100.00...add $20.95<br>
			$100.01 to $150.00..add $25.95<br>
			$150.01 to $200.00..add $28.95<br>
			$200.01 to above....add $32.95            
		</div>
	</div>

这是我的HTML当前在网页上的样子: HTML On Webpage

我当前缺少垂直线,顶部标题未对齐,底部文本未对齐。最初,这是使用一个很好的表,但现在我们希望它能够响应并使用div。我也不能使用css。我希望个人使用CSS,但该请求被拒绝。

2 个答案:

答案 0 :(得分:2)

您可能应该使用html表进行构建。 See here for further help.

<style>
table,
th {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border-right: 1px solid black;
}
</style>
<table>
  <tr>
    <th>Domestic Shipping and Handling</th>
    <th>Canada, AK, HI, PR Shipping and Handling</th>
  </tr>
  <tr>
    <td> $25..01 to $50.00..add $7.95 </td>
    <td> $.01-$25.00.. add $14.95</td>
  </tr>
  <tr>
    <td>$50.01 to $75.00...add $11.95</td>
    <td>$25.01 - $50.00.add $15.95</td>
  </tr>
  <tr>
    <td>$75.01 to $100.00...add $13.95</td>
    <td>$50.01 to $75.00...add $18..95</td>
  </tr>
  <tr>
    <td>$100.01 to $150.00...add $17.95</td>
    <td>$75.01 to $100.00...add $20.95</td>
  </tr>
  <tr>
    <td>$150.01 to $200.00 .. add $19.95</td>
    <td>$100.01 to $150.00..add $25.95</td>
  </tr>
  <tr>
    <td>200.01 &#8211; above.. add $23.95</td>
    <td>$150.01 to $200.00..add $28.95</td>
  </tr>
</table>

答案 1 :(得分:0)

非常感谢您的帖子。我使用了您的代码并对其进行了一些调整,以获得我的答案,但是您的代码比我的更好。这是经过调整后的代码:

using System;
using System.Linq;
using System.Runtime.Loader;


namespace ReflectionSample
{
    class Program
    {
        static void Main(string[] args)
        {
            // Example with a known Type
            var extendedClass = new DummyExtendedClass();
            SampleGenericClass<String> sampleGenericClass = extendedClass.SampleGenericExtensionMethod<String>();
            sampleGenericClass.SampleMethod("");

            // At compile time unknown Type - In reality the loaded dll is compiled during runtime
            var runtimeCompiledSampleAssembly =
                AssemblyLoadContext.Default.LoadFromAssemblyPath("C:/Program Files (x86)/Reference Assemblies/Microsoft/Framework/.NETCore/v4.5/System.IO.dll");
            var compileTimeUnknownClass = runtimeCompiledSampleAssembly.GetType("System.IO.TextReader");

            var reflectedExtensionMethod = typeof(Extensions).GetMethods()
                .Single(_=>_.Name== "SampleGenericExtensionMethod")
                .MakeGenericMethod(new[] {compileTimeUnknownClass});

            var howToCastThis = reflectedExtensionMethod.Invoke(extendedClass, new object[] {extendedClass});

            // whats missing:
            // howToCastThis is of Type object but should be SampleGenericClass<System.IO.TextReader>
            // I need to be able to call howToCastThis.SampleMethod(new System.IO.TextReader)
            // I thought this might work via reflecting SampleMethod and MakeGenericMethod

            Console.ReadKey();
        }
    }

    public sealed class SampleGenericClass<T>
    {
        public void SampleMethod(T typeInput)
        {
            Console.WriteLine($"Invoking method worked! T is of type {typeof(T)}");
        }
    }

    public static class Extensions
    {
        public static SampleGenericClass<T> SampleGenericExtensionMethod<T>(this DummyExtendedClass extendedClass)
        {
            Console.WriteLine($"Invoking extension method worked! T is of type {typeof(T)}");
            return new SampleGenericClass<T>();
        }
    }

    public class DummyExtendedClass
    {
        public DummyExtendedClass() { }
    }
}

希望它可以帮助其他人。我还为此添加了填充,因为其他版本之间的距离非常近且难以阅读。