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

Question

How can I create a rounded corners text box relative to the position of the text? 如何创建相对于文本位置的圆角文本框？ As of now, the box I've created is located on the top left corner of the page while the text has a specific setting with 300px padding on the left and the right. 到目前为止，我创建的框位于页面的左上角，而文本具有特定的设置，左右两侧都有300px的填充。 I want the box to contain the text and to be in the same position of the text. 我希望该框包含文本并位于文本的相同位置。

Currently learning web development. 目前正在学习网络开发。

<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

I think this will help to your. 我认为这对您有帮助。 put your all into div 全力投入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

Your syntax structure is wrong, 您的语法结构错误，

<p> tags are by default BLOCK level elements and should not contain other block level elements, such as <h2> . <p>标签在默认情况下是BLOCK级别元素，并且不应包含其他块级别元素，例如<h2> 。

replace your <p> with <div> which is the general purpose BLOCK level container element you want to use in the HTML syntax. 将<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; 
}

What browsers are most likely to do with your code is to add a element closing tag before the next non-child level element is encountered. 浏览器最有可能与您的代码一起使用的是在遇到下一个非子级元素之前添加元素结束标记。 Such as: 如：

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

Web browsers are used to dealing with lots of changing code due to (among various other reasons) issues such as the utter amateurishness of many (and especially early) website developers as well as the [formerly] often changing settings for HTML versions and other factors, so even if your site looks like it's working OK on your web browser this is no guarantee that the page HTML is actually coded correctly; 由于（许多其他原因）问题（例如，许多（尤其是早期）网站开发人员非常业余）以及[以前]经常更改的HTML版本设置和其他因素，Web浏览器习惯于处理许多变化的代码。，因此即使您的网站在网络浏览器上看起来可以正常运行，也不能保证页面HTML的编码正确。 it can just be coded well enough for the browser to make a best guess for what you're trying to achieve. 它可以被很好地编码，以使浏览器可以对您要实现的目标做出最佳猜测。

To help resolve these epic HTML inconsistencies it is highly advised to run pages through the W3C Markup Validator which will give you constructive feedback on your web page layout and structure. 为了帮助解决这些明显的HTML不一致，强烈建议通过W3C标记验证器运行页面，这将为您提供有关网页布局和结构的建设性反馈。

See http://www.w3schools.com/html/html_blocks.asp 参见http://www.w3schools.com/html/html_blocks.asp

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

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

https://stackoverflow.com/a/8696078/3536236 <== This one is useful. https://stackoverflow.com/a/8696078/3536236 <==这个很有用。

Answer 3

put a div around your 在您的周围放置一个div

eg 例如

<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>

since you're new to web dev, don't forget to put <style> around your css 由于您是Web开发人员的新手，请不要忘记在CSS周围加上<style>

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

问题描述

3 个解决方案

解决方案1
0 2016-01-25 18:11:47

解决方案2
0 2016-01-25 18:12:21

解决方案3
-1 2016-01-25 18:07:36

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

问题描述

3 个解决方案

解决方案1 0 2016-01-25 18:11:47

解决方案2 0 2016-01-25 18:12:21

解决方案3 -1 2016-01-25 18:07:36

解决方案1
0 2016-01-25 18:11:47

解决方案2
0 2016-01-25 18:12:21

解决方案3
-1 2016-01-25 18:07:36