【发布时间】：2017-08-24 19:12:24
【问题描述】：
我在宽度为 500 像素、高度为 400 像素的图片上方有一个超短两行文本的边框。有没有办法控制边框的长度，所以它只有 500px 的长度才能使它在图片上方对齐？我没有使用 div 并且我尝试过 border-length: 500px 但这不起作用，当我厌倦了 border-width: 500px 它只是把它搞砸了。我只是希望文本周围的边框与图片的长度相同，以使其看起来更干净。 （我也知道做这种风格的方式可能比我现有的要干净得多，但如果可能的话，我想尽量保持我现有的格式！）提前谢谢你！
h2.border {
border-top: 3px dotted #e5e5e5;
border-bottom: 3px dotted #e5e5e5;
box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
margin-bottom: 1px;
}
h3.border {
border-top: 3px dotted #e5e5e5;
border-bottom: 3px dotted #e5e5e5;
box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
margin-bottom: 1px;
}
h4.dotted {
border-style: dotted;
border-length: 500px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow39.js"></script>
<BODY bgColor="#87CEFA">
<div id="wrapper">
<section id="top area">
<article class="box-right">
<form action="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/search.php" method="post">
<Center>
<h2 class="border"> Search for Content</h2>
<p>
<label>Category (Dog, cat, Hamster):</label>
<input name="category" placeholder="Dog, cat, hamster" type="text">
</p>
<!-- Changed Animal type to Animal size(animal_size)-->
<p>
<label>Animal size (Large, Small, Small, Tiny/Dawf):</label>
<input name="animal_size" placeholder="Dawf Hamster" type="text">
</p>
<p>
<input value="Submit" type="submit">
</p>
<a href="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/FinalPro_Main.html">
Return to Main page </a>
</br>
<h3 class="border"> Pictures of a few animals we have right now</h3>
<h4 class="dotted"> Large Dog </br> Name: Tiny</h4>
<img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/bigdog.jpg" alt="Big Dog" Style="width:500px;height:400px;"></br>
<h4 class="dotted"> Small Dog </br> Name: Yippy</h4>
<img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/smalldog.jpg" alt="Small Dog" Style="width:400px;height:600px;"></br>
<h4 class="dotted"> Small Cat </br> Name: Teddy</h4>
<img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/smallcat.jpeg" alt="Small Cat" Style="width:400px;height:600px;"></br>
<h4 class="dotted"> Small Hamster </br> Name: Digger</h4>
<img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/dawfhamster.jpg" alt="Small hamster" Style="width:400px;height:600px;">
</br>
</br>
<a href="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/FinalPro_Main.html">
Return to Main page </a>
</center>
</form>
</article>
</section>
</div>
</body>【问题讨论】：
-
所有图片的宽度都一样吗？因为我看到你的第二张和第三张图片不是 500px。