リストタグとテキストを並び替えるにはどうすればいいですか？

私は、比較的新しいHTMLとCSSを使用しており、ウェブサイトの再作成に取り組んでいます。リストタグとテキストを並び替えるにはどうすればいいですか？

My output looks like this

マイ（ずさん）コードここにある： CSSとHTML

http://pastebin.com/4EVBj5zK

どちらも、私は適切にdiv要素の右側に私のテキストを配置する方法を知っていただきたいと思います。

出典

2016-03-28 spoon_seth

テキストコンテナに絶対位置付けを行い、それを親の右上と右端に配置します。

また、親要素が相対的に配置されていることを確認する必要があります。

head{font-family: Verdana, Geneva, sans-serif; 
 
} 
 
body{background-color: #C0C0C0; 
 
} 
 
p{font-family: "Courier New", Courier, monospace; 
 
} 
 
.borderlist{ 
 
\t list-style-position:inside; 
 
\t list-style-type:none; 
 
} 
 
.header{ 
 
\t font-family: Verdana, Geneva, sans-serif; 
 
\t font-size: 50px; 
 
\t float: left-side; 
 
\t padding-top: 20px; 
 
\t padding-left: 50px; 
 
\t 
 
} 
 
a:link, a:visited, a:active{ 
 
\t text-decoration: none; 
 
\t color: #292421; 
 
\t font-family: Verdana, Geneva, sans-serif; 
 
\t font-size: 20px; 
 
\t display: inline-block; 
 
\t border : 4px solid orange; 
 
\t width: 275px; 
 
\t padding: 30px; 
 
\t background-color: #D3D3D3; 
 
\t 
 
} 
 
a:hover{ 
 
\t text-decoration: none; 
 
\t color: #292421; 
 
\t font-family: Verdana, Geneva, sans-serif; 
 
\t display: inline-block; 
 
\t border : 4px solid #ee7600; 
 
\t padding: 30px; 
 
\t background-color: #E8E8EE; 
 
} 
 
.div_top{ 
 
\t background-color: #E18A07; 
 
\t width: 700px; 
 
\t height: 300px; 
 
\t padding-left: 50px; 
 
\t padding-top: 75px; 
 
\t margin-left: 75px; 
 
\t float:left; 
 
    position:relative; 
 
} 
 
.div_top_text{ 
 
\t width: 75px; 
 
    top:0px; 
 
    right:0px; 
 
    position:absolute; 
 
\t padding-right: 20px; 
 
    vertical-align:top; 
 
} 
 
.br_bigger{ 
 
\t margin: 100px; 
 
\t padding: 100px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="style_test.css"> 
 
<title>Freepbx Support</title> 
 
</head> 
 
<body> 
 
<header class="header"><b>FreePBX</b> Support</header> 
 
<br> 
 
<div class="div_top"> 
 
\t <li class="borderlist"><a href="www.google.com">FreePBX initial setup</a></li> 
 
\t <br> 
 
\t <br> 
 
\t <br> 
 
\t <li class="borderlist"><a href="www.google.com">FreePBX Advanced setup</a></li> 
 
\t <div class="div_top_text">FreePBX tech was created for beginners or experts of the open source pbx system. Read our documents or watch our help videos to learn how to use the latest version of FreePBX</div> 
 
\t </div> 
 
</body> 
 
</html>

出典

2016-03-28 16:56:04 Wowsk

と一緒に使用しているどうもありがとう、これは作業私の機能を持って！ –

このソリューションはリサイズされているブラウザの世話をするだろう、これを試してみてください。 *注：私はあなたがのliタグを使用している気づき、私は任意のULタグを見ていない、一般的にリチウムUL

.list-boxer{ 
 
    float: left; 
 
} 
 
.list{ 
 
    width: 275px; 
 
    
 
    list-style: none; 
 
    margin: 0px 0px; 
 
    padding: 0px 0px; 
 
} 
 
.list li{ 
 
    width: inherit; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
\t display: inline-block; 
 
\t padding: 0px; 
 
} 
 
.list li a{ 
 
    display: block; 
 
    padding: 30px 30px; 
 
    margin: 25px 0px; 
 
    border : 4px solid #ee7600; 
 
} 
 
.div_top_text_boxer{ 
 
    overflow: hidden; 
 
    padding: 25px; 
 
} 
 
.div_top_text{ 
 
    width: 98%; 
 
    padding: 1%; 
 
}

<div class="list-boxer"> 
 
<ul class="list"> 
 
    <li><a href="www.google.com">FreePBX initial setup</a></li> 
 
    <li><a href="www.google.com">FreePBX Advanced setup</a></li> 
 
</ul> 
 
</div> 
 

 
<div class="div_top_text_boxer"> 
 
    <div class="div_top_text"> 
 
    FreePBX tech was created for beginners or experts of the open source pbx system. Read our documents or watch our help videos to learn how to use the latest version of FreePBX 
 
    </div> 
 
</div>

出典

2016-03-28 17:40:10 Gacci

ありがとう、私はそれがすべてpxの代わりに行くとかなり挫折していた変更する必要があることを実現しました。 –

リストタグとテキストを並び替えるにはどうすればいいですか？

答えて

関連する問題