コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > フォーラム friends_html/css_WEB-ITnose からのレイアウトの質問への回答

フォーラム friends_html/css_WEB-ITnose からのレイアウトの質問への回答

WBOY
リリース： 2016-06-24 11:54:33
オリジナル
1110 人が閲覧しました

出典: http://www.ido321.com/1147.html

要件: select、ul、テキスト、ボタン、テキストを 1 行で表示します。効果は次のとおりです: http://bbs.csdn .net /topics/390915380?page=1#post-398415668

私の実装は次のとおりです

HTML: 

<!DOCTYPE html><html> <head>    <title>Test</title>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   </head>  <body>  <div class="main">      <div class="pagediv">          <ul>              <li><a href="">《</a></li>              <li><a href="">1</a></li>              <li><a href="">2</a></li>              <li><a href="">3</a></li>              <li><a href="">4</a></li>              <li><a href="">》</a></li>          </ul>      </div>      <div class="seldiv">          每页          <select>              <option>20</option>              <option>30</option>              <option>50</option>          </select>          记录跳转至第<input type="text">页          <input type="button" value="Go">      </div>  </div></body> </html>
ログイン後にコピー

CSS: 

ul    {        list-style: none;    }    .pagediv    {        float: left;    }    ul li    {        float: left;    }    a    {        text-decoration: none;        display: block;        border: 1px solid #ccc;        text-align: center;        line-height: 24px;        width: 24px;        height: 24px;    }    a:hover    {        text-decoration: none;        color: red;    }    .seldiv    {        float: left;        margin: 20px;    }
ログイン後にコピー

効果:

次の記事: Web スクレイピング Take: PHP で Web クローラーを実装する方法の概要


フォーラムの友人からのレイアウトの質問への回答

関連ラベル：
关于坛友的一个布局问题的解答
ソース：php.cn
前の記事：CSSポップアップ背景半透明 window_html/css_WEB-ITnose 次の記事：Codeforces ラウンド #276 (ディビジョン 1)B（暴力）_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
React アプリケーション作成の問題を解決するにはどうすればよいですか? [閉まっている] 実際、npxcreate-react-appmy-app を追加したため、React アプリの作成中にターミナルでエラーが発生しました。エラーはエラーをスローすることであり、その後...
から 2024-04-05 12:46:17
0
1
412
Ajax を使用したコンテンツの生成 - ID までスクロールできない ajax経由で取得したデータに基づいてページコンテンツを生成します。私が抱えている問題は、特定の ID までスクロールしたいときに、スクロールが起こらないか、間違った場所にスクロー...
から 2024-04-04 09:29:39
0
1
397
正規表現を使用した HTML での単語カウント これもこれと同じ問題です。しかし、私はJavaScriptを使用していないので、「innerText」は私にとって解決策ではなく、正規表現が一連の処理を行わずに/(<.*?&...
から 2024-04-01 22:44:06
0
1
416
TypeError: ThreeJs を使用して未定義のプロパティを読み取ることができません (「位置」を読み取ります) Web サイトのヒーロー セクションの背景に 3D モデルを統合しようとしています。これは機能しますが、ウィンドウ サイズを手動で変更すると、3D モデルが新しいサイズに適応しない...
から 2024-04-01 12:01:52
0
1
416
Livewire と flatpickr: 空のデータを処理する場合の変更 免責事項: Livewire と flatpickr を結合する方法についていくつかの質問があることは承知していますが、提供された解決策は私の問題へのアプローチ方法と大きく異なるた...
から 2024-03-31 17:22:58
0
2
367
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート