Question

如何创建相对于文本位置的圆角文本框？截至目前，我创建的框位于页面的左上角，而文本具有特定的设置，左侧和右侧有300px填充。我希望该框包含文本并位于文本的相同位置。

目前正在学习网页开发。

<p id="rcorners">
<h2>Education</h2>
<ul>
<li><b>New York University</b></li>
<li> Bachelor of Science in Journalism, Minor in English, expected graduation 2018</li>
<li>GPA: 3.76</li>
</ul>
</p>

#rcorners {
    border-radius: 25px;
    border: 2px solid #000;
    padding-left: 300px; 
    padding-right: 300px;
    width: 200px;
    height: 150px; 
}

Answer 1

我认为这对你有帮助。将你的所有内容都放入div

<html>
<head>
<title>Welcome !</title>

<style type="text/css">
 #txbox{
    border: 1px solid black;
    box-shadow: 1px 2px 2px black;
    width: 50%;
    height: auto;
    padding-left: 5%;
    position: absolute;
    border-radius: 25px;
  }

</style>
 <body>

 <div id="txbox">

    <h2>Education</h2>
    <ul>
    <li><b>New York University</b></li>
    <li> Bachelor of Science in Journalism, Minor in English, expected graduation 2018</li>
    <li>GPA: 3.76</li>
    </ul>

 </div>

 </body>
</html>

Answer 2

您的语法结构错误，

<p>标签默认为BLOCK级别元素，不应包含其他块级元素，例如<h2>。

将<p>替换为<div>，这是您要在HTML语法中使用的通用BLOCK级别容器元素。

<div id="rcorners">
<h2>Education</h2>
<ul>
<li><strong>New York University</strong></li>
<li> Bachelor of Science in Journalism, Minor in English, expected graduation 2018</li>
<li>GPA: 3.76</li>
</ul>
</div>

#rcorners {
    border-radius: 25px;
    border: 2px solid #000;
    padding-left: 300px; 
    padding-right: 300px;
    width: 200px;
    height: 150px; 
}

最有可能使用代码的浏览器是在遇到下一个非子级元素之前添加元素结束标记。如：

<p id="rcorners">
</p>
<h2>Education</h2>
<ul>
...
</ul>
</p> <!-- This tag is now surplus to requirements -->

Web浏览器用于处理大量不断变化的代码，原因是（出于各种其他原因）问题，例如许多（尤其是早期）网站开发人员的完全业余性以及[以前]经常更改HTML版本的设置和其他因素，因此，即使您的网站看起来在您的网络浏览器上运行正常，也不能保证页面HTML实际编码正确;它可以编码得足够好，以便浏览器能够最好地猜测你想要实现的目标。

为了帮助解决这些史诗般的HTML不一致问题，高度建议您通过W3C Markup Validator运行网页，这将为您提供有关网页布局和结构的建设性反馈。

请参阅http://www.w3schools.com/html/html_blocks.asp

https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements

http://www.impressivewebs.com/difference-block-inline-css/

https://stackoverflow.com/a/8696078/3536236＆lt; ==这个很有用。

Answer 3

在你的

周围加上一个div

e.g。

<div id="rcorners">
<p>
<h2>Education</h2>
<ul>
<li><b>New York University</b></li>
<li> Bachelor of Science in Journalism, Minor in English, expected     graduation 2018</li>
<li>GPA: 3.76</li>
</ul>
</p>
</div>

由于您是网络开发人员的新手，请不要忘记将＆lt; style＆gt;放入围绕你的CSS

如何使用CSS创建圆角文本框？

3 个答案: